Question

我的代码如下：

    <html>
        <head>
        </head>
        <body>

            <script>
                var div = document.createElement('div');

                div.setAttribute('style','background-color: gray; border-bottom: dotted black;padding: 3px; font-family: sans-serif; font-weight: bold;');
                div .setAttribute('textcontent', 'brick2');  // not work
                //div.textContent = 'brick';              //  work          


                document.body.appendChild(brick);

            </script>

        </body>
    </html>

元素的set属性有两种方式，将HTML Attributes设置为Element Properties或setAttribute方法。

当使用“div.textContent ='brick'”这段代码设置HTML属性作为元素属性时，浏览器可以显示正常的文本，但是当使用“div.setAttribute（'textContent'，'brick'）”这段代码时浏览器无法显示文字？

我很困惑，所以我研究了元素的属性，引用为this，但是element.style与element.textContent类似。为什么setAttribute（'style'...）工作但是 setAttribute（'textContent'...）不是？

我的浏览器是chrome 36.0.1985.143 m

Answer 1

那是因为textContent是您刚刚创建的div元素的属性。将textContent设置为setAttribute()会为您的div元素提供新属性：

<div style="..." textContent="brick"></div>

...这不是有效的HTML属性，不会自行执行任何操作。

将HTML属性设置为元素属性与setAttribute方法

1 个答案: