当前位置：网站首页>DOM series change element content

DOM series change element content

2022-07-20 12:14:00 【Old__ L】

Catalog

1、innerText
2、innerHTML
3、 difference
- 3.1、 The difference in getting content ：
- 3.2、 The difference when setting content ：
4、 Example
Postscript

1、innerText

1.1、 summary

HTMLElement Interface innerText Attribute represents the rendered text content of a node and its descendants . As a getter, It is similar to the user using the cursor to highlight the element content , Then copy it to the text obtained from the clipboard . As setter, It will replace the child element of the element with the given value , Convert any line breaks to <br> Elements .

1.2、 grammar

var renderedText = HTMLElement.innerText;
HTMLElement.innerText = string;

1.3、 Output value

a section DOMString Represents the rendered content of an element . If the element itself is not rendered (e.g Deleted from the document or not displayed in the view ), At this time, the return value is the same as Node.textContent Same attribute .

1.4、 Example

<body>
	<button> Display the current system time </button>
	<div> Some time </div>
	<p>1123</p>
	<script> //  When we hit the button , div The text will change  // 1.  Get elements  var btn = document.querySelector("button"); var div = document.querySelector("div"); // 2. Registration events  btn.onclick = function () {
       div.innerText = "2019-6-6"; }; function getDate() {
       var date = new Date(); //  Let's write a  2019 year  5 month  1 Japan   Wednesday  var year = date.getFullYear(); var month = date.getMonth() + 1; var dates = date.getDate(); var arr = [" Sunday ", " Monday ", " Tuesday ", " Wednesday ", " Thursday ", " Friday ", " Saturday "]; var day = date.getDay(); return " It's today ：" + year + " year " + month + " month " + dates + " Japan  " + arr[day]; } </script>
</body>

2、innerHTML

2.1、 summary

Element.innerHTML Property to set or get HTML The descendants of elements represented by syntax .

2.2、 grammar

const content = element.innerHTML;
element.innerHTML = htmlString;

2.3、 Return value

DOMString Containing descendants of elements HTML Sequence . Set the element's innerHTML All descendants of this element will be deleted and will be replaced with htmlString replace .

2.4、 abnormal

SyntaxError： When HTML When it is not marked correctly , Set up innerHTML Syntax errors will be thrown .

NoModificationAllowedError： When the parent element is Document when , Set up innerHTML You will be prompted that modification is not allowed .

2.5、 Example

<body>
	<button> Display the current system time </button>
	<div> Some time </div>
	<p>1123</p>
	<script> //  When we hit the button , div The text will change  // 1.  Get elements  var btn = document.querySelector("button"); var div = document.querySelector("div"); // 2. Registration events  btn.onclick = function () {
       div.innerHTML = getDate(); }; function getDate() {
       var date = new Date(); //  Let's write a  2019 year  5 month  1 Japan   Wednesday  var year = date.getFullYear(); var month = date.getMonth() + 1; var dates = date.getDate(); var arr = [" Sunday ", " Monday ", " Tuesday ", " Wednesday ", " Thursday ", " Friday ", " Saturday "]; var day = date.getDay(); return " It's today ：" + year + " year " + month + " month " + dates + " Japan  " + arr[day]; } </script>
</body>

3、 difference

3.1、 The difference in getting content ：

innerText Will remove spaces and line breaks , and innerHTML Spaces and line breaks are preserved

3.2、 The difference when setting content ：

innerText Can't recognize html, and innerHTML identifies

4、 Example

<body>
	<div></div>
	<p>
		 I am character. 
		<span>123</span>
	</p>
	<script> // innerText  and  innerHTML The difference between  // 1. innerText  Don't recognize html label   Nonstandard   Remove spaces and line breaks  var div = document.querySelector("div"); // div.innerText = '<strong> It's today ：</strong> 2019'; // 2. innerHTML  distinguish html label  W3C standard   Keep spaces and line breaks  div.innerHTML = "<strong> It's today ：</strong> 2019"; //  These two properties are readable and writable   You can get the content of the element  var p = document.querySelector("p"); console.log(p.innerText); console.log(p.innerHTML); </script>
</body>

Postscript

If you feel the article is not good //(ㄒoㄒ)//, Just leave a message in the comments , The author continues to improve ;o_O???
If you think the article is a little useful , You can praise the author ;\\*^o^*//
If you want to progress with the author , Sure Wechat scan QR code , Focus on the front-end old L;~~~///(^v^)\\\~~~
Thank you readers (^_^)∠※！！！

Insert picture description here