createTextNode and innerHTML differences and line breaks

today write code, use to createTextNode, found as if the function and innerHTML is the same, and then consulted the online information.

First, createTextNode for example:

var element = document.createelement ("div"); element.classname = "message"; var Textnode = document.createTextNode ("  <strong>Hello</strong>"); Element.appendchild (Textnode);d ocument.body.appendChild (element);

Ii. InnerHTML Example: results: <Strong>Hello</Strong>

<><ID= "H2"></H2 ></ Div > document.getElementById ("H2"). InnerHTML = " < Strong >Hello</strong>"; Result: Hello recognized as bold bold

Third, line-wrapping

var t = document.createtextnode ("Hello W\norld"), var t = document.createelement ("P"); t.innerhtml= "Hello W < BR />Orld ";

Iv. differences

innerHTML and createTextNode can add a piece of content to a node, except that if the content has HTML tags (such as <strong></strong> in the example), it will be different. It will be treated as text in createTextNode and will not be parsed by the browser, but will be treated as HTML code with innerHTML (as in your example, hello will be shown in bold).
In general, if you are sure that there is no HTML tag in the content you want to insert, you can use innerHTML, which is more concise, but it is recommended to use createTextNode if you are unsure (such as inserting user input).

createTextNode and innerHTML differences and line breaks