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

WBOY
Release: 2016-05-16 18:26:57
Original
1043 people have browsed it

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

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
test1 test2



Full example:

Copy code The code is as follows:


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



Some related articles
javascript dom operation detailed explanation js enhancement
Related labels:
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template