String to HTML without extra surrounding div

Related searches

I have a string representing <a> element, named lal_output. It has href, id and class. I want to convert this string to HTML:

lal_html = document.createElement('div');
lal_html.innerHTML = lal_output;    

The problem is that it receives <div> wrapper. How can I get rid of it? I must use JavaScript without libraries.

Although you could capture the child elements with a regex, a document fragment might be easier for your use case.

lal_html = document.createDocumentFragment();
lal_html.innerHTML = lal_output;

// Attach it to the node it belongs to in the DOM
element.appendChild(lal_html);

Element.innerHTML, A DOMString containing the HTML serialization of the element's descendants. to set the value of innerHTML using a string which is not properly-formed HTML. was made to insert the HTML into a node whose parent is a Document . The <div> whose class is "log" is the container for the log text itself. Using the innerHTML attribute. Using the insertAdjacentHTML () method. Using the innerHTML attribute: To append using the innerHTML attribute, first select the element (div) where you want to append the code. Then, add the code enclosed as strings using the += operator on innerHTML.

You can use DOMParser() as shown below

var parser = new DOMParser();
var domString = '<a class="test" href="https://google.com">Google</a>';
var html = parser.parseFromString(domString, 'text/html');    
document.body.append(html.body.firstChild); //append to somewhere appropriate

A simple POC

.wrap(), A selector, element, HTML string, or jQuery object specifying the structure to Using .wrap() , we can insert an HTML structure around the inner <div> elements like so: The new <div> element is created on the fly and added to the DOM. See how to use the tag to group HTML elements and style them with CSS, how to apply class, id, style, and other attributes to tag. Try Examples.

I couldn't simply use document.createDocumentFragment() instead of document.createElement('div'). It generated no output on page. However, I found that this solution solves the problem. I wonder whether this or shorter way provided by Tico is better.

function stringToHTML(htmlStr) {    

    frag = document.createDocumentFragment();
    temp = document.createElement('div');
    temp.innerHTML = htmlStr;

    while(temp.firstChild) {
        frag.appendChild(temp.firstChild);
    }

    return  frag;
}

lal_html = stringToHTML(lal_output);

.parent(), version added: 1.0.parent( [selector ] ) A string containing a selector expression to match elements against. Also, $( "html" ).parent() method returns a set containing document whereas $( "html" ) Since we do not supply a selector expression, the parent element is <div class="selected"><p>Hello Again</p></ div>. Online HTML Encode tool to encode html string. Simple and Fast!. Enter a HTML text, upload a file, get url to Encode HTML.

You could try using insertAdjacentElement

document.body.insertAdjacentElement('beforeend', lal_output);

Or if it needs to be placed after a specific element:

document.querySelector('someSpecificSelector').insertAdjacentElement('afterend', lal_output);

Other valid values for the first parameter are 'beforebegin' and 'afterbegin'. See MDN reference

HTML element, An HTML element is a type of HTML (Hypertext Markup Language) document component, one This is the case for many, but not all, elements within an HTML document. An HTML tag is composed of the name of the element, surrounded by angle brackets. An end tag also Creates a block-level center-aligned division. In this article, you will find 3 ways to strip the html tags from a string in Javascript. 1. Create a temporary DOM element and retrieve the text. This is the preferred (and recommended) way to strip the HTML from a string with Javascript.

Fragments – React, Fragments let you group a list of children without adding extra nodes to the DOM. to return multiple <td> elements in order for the rendered HTML to be valid. If a parent div was used inside the render() of <Columns /> , then the resulting´┐Ż Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java and XML.

Use block-level elements to break the line without using <br> tag. There are many ways to break the line without using <br> tag. The used properties are listed below: white-space: pre; It is used to make elements acts like <pre> tag. display: block; It sets the display property of elements to block.

jQuery.parseHTML uses native methods to convert the string to a set of DOM nodes, which can then be inserted into the document. These methods do render all trailing or leading text (even if that's just whitespace). To prevent trailing/leading whitespace from being converted to text nodes you can pass the HTML string through jQuery.trim.

Comments
  • That is exactly what DocumentFragment is for.
  • Great stuff, I can store exact HTML in variable by adding one line after parsing: parser = new DOMParser(); lal_html = parser.parseFromString(lal_output, 'text/html'); lal_html = lal_html.body.firstChild;