Add elements to the DOM given plain text HTML using only pure JavaScript (no jQuery)

Asked
Active3 hr before
Viewed126 times

6 Answers

javascriptelementsusing
90%

Obviously that doesn't work, I'm looking for good ways to achieve the same result. I'd like to avoid parsing the HTML if possible. I'm severely restricted on the tools I can use, no jQuery or outside includes and must be cross-browser and backward compatible down to IE6. Any help would be huge.,Please be sure to answer the question. Provide details and share your research!, Word for anyone inside a car or bus, both passengers and driver , Why might Jude tell us in his Letter that N/T Scripture had been fully delivered to the saints (cf. Jude vs. 3)?

Try assigning to the innerHTML property of an anonymous element and appending each of its children.

function appendHtml(el, str) {
  var div = document.createElement('div');
  div.innerHTML = str;
  while (div.children.length > 0) {
    el.appendChild(div.children[0]);
  }
}
var html = '<h1 id="title">Some Title</h1><span style="display:inline-block; width=100px;">Some arbitrary text</span>';
appendHtml(document.body, html); // "body" has two more children - h1 and span.
load more v
88%

I need to be able to add elements to a page given a raw text string of HTML, including any number of tags, attributes etc. Ideally I would like to be able to do something like with any arbitrary string of well-formed html; ,Try assigning to the innerHTML property of an anonymous element and appending each of its children.,You could get the elementId of the element under which you wish to insert the HTML and use innerHTML for adding the html.,There are options other than beforeend, but it sounds like you want to append to the element, which is what beforeend does.

I need to be able to add elements to a page given a raw text string of HTML, including any number of tags, attributes etc. Ideally I would like to be able to do something like with any arbitrary string of well-formed html;

 var theElement = document.createElement("<h1 id='title'>Some Title</h1><span style="display:inline-block; width=100px;">Some arbitrary text</span>");

 document.getElementById("body").appendChild(theElement);
load more v
72%

Of course, we can just as well create entirely new elements or text nodes:,I’ll finish off by showing you how to create your own super slim DOM-library that you can drop into any project. Along the way, you’ll learn that DOM manipulation with vanilla JS is not rocket science and that many jQuery methods in fact have direct equivalents in the native API.,This will return the first match (depth first). Conversely, we can check if an element matches a selector:,In this article, I’ll demonstrate how to accomplish some of the most common DOM manipulation tasks with plain JavaScript, namely:

The DOM can be queried using the .querySelector() method, which takes an arbitrary CSS selector as an argument:

const myElement = document.querySelector('#foo > div.bar')
load more v
65%

HTML elements often contains text. To create a button with text, use the innerText or innerHTML properties of the element object:,Create a <p> element with some text, use innerText to set the text, and append it to the document:,Create a button with text:,Tip: After the element is created, use the element.appendChild() or element.insertBefore() method to insert it to the document.

HTML elements often contains text. To create a button with text, use the innerText or innerHTML properties of the element object:

innerText

HTML elements often contains text. To create a button with text, use the innerText or innerHTML properties of the element object:

innerHTML
load more v
75%

Adding element after and before other elements in the DOM, also known as appending or prepending. Pure JavaScript provides some handy methods for that.,The appendChild method will put the source element inside the target element, in the last position, after all of the pre-existing elements.,There’s no prependChild, but prepending can be done using the insertBefore().,There’s a rule: the same node can’t be present twice in the DOM, this means that if an existing element is appended, it will be removed from it’s original position. So in that case it’s more like a move command. If this is not desired, try the .cloneNode() instead.

const box = document.getElementById('box')
const jack = document.createElement('div')
jack.innerHTML = 'Jack!'
box.appendChild(jack)
load more v
40%

Creates a new element node with the given tag:,So, these methods can only be used to insert DOM nodes or text pieces.,Creates a new text node with the given text:,document.createElement(tag) – creates an element with the given tag,

<style>
.alert {
  padding: 15px;
  border: 1px solid #d6e9c6;
  border-radius: 4px;
  color: #3c763d;
  background-color: #dff0d8;
}
</style>

<div class="alert">
  <strong>Hi there!</strong> You've read an important message.
</div>
load more v

Other "javascript-elements" queries related to "Add elements to the DOM given plain text HTML using only pure JavaScript (no jQuery)"