Advantages of createElement over innerHTML?

There are several advantages to using createElement instead of modifying innerHTML (as opposed to just throwing away what’s already there and replacing it) besides safety, like Pekka already mentioned: Preserves existing references to DOM elements when appending elements When you append to (or otherwise modify) innerHTML, all the DOM nodes inside that element have to … Read more

Add/remove HTML inside div using JavaScript

You can do something like this. function addRow() { const div = document.createElement(‘div’); div.className=”row”; div.innerHTML = ` <input type=”text” name=”name” value=”” /> <input type=”text” name=”value” value=”” /> <label> <input type=”checkbox” name=”check” value=”1″ /> Checked? </label> <input type=”button” value=”-” onclick=”removeRow(this)” /> `; document.getElementById(‘content’).appendChild(div); } function removeRow(input) { document.getElementById(‘content’).removeChild(input.parentNode); }

How to get innerHTML of DOMNode?

Compare this updated variant with PHP Manual User Note #89718: <?php function DOMinnerHTML(DOMNode $element) { $innerHTML = “”; $children = $element->childNodes; foreach ($children as $child) { $innerHTML .= $element->ownerDocument->saveHTML($child); } return $innerHTML; } ?> Example: <?php $dom= new DOMDocument(); $dom->preserveWhiteSpace = false; $dom->formatOutput = true; $dom->load($html_string); $domTables = $dom->getElementsByTagName(“table”); // Iterate over DOMNodeList (Implements Traversable) … Read more

Change label text using JavaScript

Because your script runs BEFORE the label exists on the page (in the DOM). Either put the script after the label, or wait until the document has fully loaded (use an OnLoad function, such as the jQuery ready() or http://www.webreference.com/programming/javascript/onloads/) This won’t work: <script> document.getElementById(‘lbltipAddedComment’).innerHTML = ‘your tip has been submitted!’; </script> <label id=”lbltipAddedComment”>test</label> This … Read more

Append HTML to container element without innerHTML

Check out the insertAdjacentHTML() method. The first parameter is where you want the string appended and takes (“beforebegin”, “afterbegin”, “beforeend”, “afterend”). In the OP’s situation you would use “beforeend”. The second parameter is just the html string. Basic usage: var d1 = document.getElementById(‘one’); d1.insertAdjacentHTML(‘beforeend’, ‘<div id=”two”>two</div>’);

nodeValue vs innerHTML and textContent. How to choose? [duplicate]

Differences between textContent/innerText/innerHTML on MDN. And a Stackoverflow answer about innerText/nodeValue. Summary innerHTML parses content as HTML, so it takes longer. nodeValue uses straight text, does not parse HTML, and is faster. textContent uses straight text, does not parse HTML, and is faster. innerText Takes styles into consideration. It won’t get hidden text for instance. … Read more

Is it possible to append to innerHTML without destroying descendants’ event listeners?

Using .insertAdjacentHTML() preserves event listeners, and is supported by all major browsers. It’s a simple one-line replacement for .innerHTML. var html_to_insert = “<p>New paragraph</p>”; // with .innerHTML, destroys event listeners document.getElementById(‘mydiv’).innerHTML += html_to_insert; // with .insertAdjacentHTML, preserves event listeners document.getElementById(‘mydiv’).insertAdjacentHTML(‘beforeend’, html_to_insert); The ‘beforeend’ argument specifies where in the element to insert the HTML content. Options … Read more

Executing elements inserted with .innerHTML

Simplified ES6 version of @joshcomley’s answer with an example. No JQuery, No library, No eval, No DOM change, Just pure Javascript. http://plnkr.co/edit/MMegiu?p=preview var setInnerHTML = function(elm, html) { elm.innerHTML = html; Array.from(elm.querySelectorAll(“script”)).forEach( oldScript => { const newScript = document.createElement(“script”); Array.from(oldScript.attributes) .forEach( attr => newScript.setAttribute(attr.name, attr.value) ); newScript.appendChild(document.createTextNode(oldScript.innerHTML)); oldScript.parentNode.replaceChild(newScript, oldScript); }); } Usage $0.innerHTML = HTML; … Read more

tech