Differences among innerHTML, outerHTML, innerText, and outerText and the insertAdjacentHTML () method, outerhtmloutertext

Differences among innerHTML, outerHTML, innerText, and outerText and the insertAdjacentHTML () method, outerhtmloutertext

When you need to insert a large number of new HTML tags to a document, it is very troublesome and inefficient to create a node and specify the relationship between them through multiple DOM operations, the insert TAG method is simpler and faster.

The insert tag has these four attributes.InnerHtml, outerHTML, innerText, outerText.

These four attributes have the acquired and set statuses.

Let's take a look at a short piece of code.

 

<Div> <p> I am a sub-element of div </p> </div>

 

* Here we need to get this div first, and I will use divnode instead. Test in chrome.

• InnerHTMLObtain and set all HTML (including tags) in the call element ).
• OuterHTMLObtain and set all HTML and its own (including tags) in the call element ).
• InnerTextObtain and set the text in the call element.
• OutTextSet (including tags) or get (excluding tags) The text of the object.

Let's take a look at the differences between the four statuses.

Divnode. innerHTML = "<I> I am the div sub-element I after innerHTML Settings </I>;

Divnode. outerHTML = "<B> <I> I am the B sub-element I after outerHTML Settings </I> </B>"

Divnode. innerText = "<I> I am the div sub-element I after innerHTML Settings </I> ";

Divnode. outerText = "<I> I am the div sub-element I after innerHTML Settings </I> ";

Insert as the previous peer element)

2. "afterBegin": insert to tag start (insert as the first child element)

3. "beforeEnd": insert to the end tag of the tag (insert as the last child element)

4. "afterEnd": insert to the end tag of the tag (insert as the last peer element)