Home >Web Front-end >JS Tutorial >Summary of js copying or inserting Html implementation methods_javascript skills

Summary of js copying or inserting Html implementation methods_javascript skills

WBOYOriginal: 2016-05-16 18:26:571052browse

var bq=document.getElementsByTagName("Tag or ID name")//ID is a unique grouping, the tag is not unique, and an array may be returned.
div=document.createElement("div");
...Set CSS style
bq.appendChild(div); //This is all you need for ID uniqueness! Insert the div layer after bq
bq[0].appendChild(div);//If the tag is used before! Arrays and subscripts! Insert the div layer after bq
bq.insertBefore(div);//This is all you need for ID uniqueness! Insert the div layer before bq
bq[0].insertBefore(div);//If the tag is used before! Arrays and subscripts! Insert a div layer before bq

document.getElementById('navition').style.cssText = 'Your CSS code';
//Copy a div
var bq=document.getElementById( "Copy")//ID is the only allowed grouping, the label is not unique, and may return an array.
objDiv=document.createElement("div");
objDiv.id=bq.id Copy;
objDiv.style.position="absolute"
objDiv.style.left="200px"
objDiv.style.top="200px"
objDiv.innerHTML=bq.innerHTML;
bq .appendChild(objDiv);

test1 test2

Can be used in JS:

test.innerHTML: That is, the entire content from the starting position to the ending position of the object, including the Html tag.
The value of test.innerHTML in the above example is also

test1 test2
test1 test2

test.innerText: the content from the starting position to the ending position, but it removes the Html tag
The value of text.innerTest in the above example is also It is "test1 test2", with the span tag removed.

test.outerHTML: In addition to containing the entire content of innerHTML, it also contains the object tag itself.
The value of text.outerHTML in the above example is

test1 test2

Full example:

Copy code The code is as follows:

test1 test2

innerHTML Content
inerHTML Content
outerHTML content

test1 test2

innerHTML content
inerHTML content
outerHTML content

Special instructions :

innerHTML is an attribute that complies with W3C standards, while innerText is only applicable to IE browsers. Therefore, use
innerHTML as much as possible and less innerText if you want to output content without HTML tags. , you can use innerHTML to obtain the content containing the
HTML tag, and then use regular expressions to remove the HTML tag. The following is a simple example that complies with W3C standards:

Copy the code The code is as follows:

test1< /span> test2

No HTML, compliant with W3C standards

test1 test2

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：jquery rotation display first small example_jqueryNext article：jquery rotation display first small example_jquery

See more

Summary of js copying or inserting Html implementation methods_javascript skills

Related articles