Question

我希望知道只写一次相同的东西并在同一页面内重复的最佳方法。例如：

<div>
    <p id="description1"></p>
</div>
<div>
    <p id="description1"></p>
</div>
--

我希望只在description1内写body一次。我认为这可以通过DOM来实现。

Answer 1

使用class属性将元素放在同一个类中，然后使用getElementsByClassName() DOM函数获取所有元素的列表。然后，您可以使用for loop来查看列表。

[].forEach.call(document.getElementsByClassName("description"), function(elem) {
        elem.innerHTML = "StackOverflow saved my day!";
});

您甚至可以使用content属性将文本放在同一个类的所有元素中，不使用JavaScript，只使用CSS。

Answer 2

首先，每个元素的ID字段应该是唯一的。

如果你给所有标签一个类<p class="description"></p>，那么你可以使用jQuery通过调用它们来设置它们：

$('.description').text('This is the text')

在javascript中：

var elements = document.getElementsByClassName("description");
for (var i = 0; i < elements.length; i++) {
    elements[i].innerHTML = "This is the text.";
}

Answer 3

看看这里提出的解决方案 How to repeat div using jQuery or JavaScript?

这个似乎工作得很好：

HTML：

<div id="container">data</div>

JS：

var container = document.getElementById('container');

function block(mClass, html) {
    //extra html you want to store.
    return '<div class="' + mClass + '">' + html + '</div>';
}

//    code that loops and makes the blocks.
//    first part: creates var i
//    second:     condition, if 'i' is still smaller than three, then loop.
//    third part: increment i by 1;
for (var i = 0; i < 3; i++) {
    // append the result of function 'block()' to the innerHTML
    // of the container.
    container.innerHTML += block('block', 'data');
}

JSFIDDLE

Answer 4

两个元素不能 相同ID 但相同类

 <head>
        <script>
            var x = document.getElementsByClassName("description");
            for (var i = 0; i < x.length; i++) {
                    x[i].innerHTML = "This is the text.";
            }
        </script>

        <style>
               .description1 {                    // this will apply the same style to all elements having class as description1
                  text-align: center;
                  color: red;
               }
        </style>
 </head>

    <body>
        <div>
            <p class="description1"></p>
        </div>
        <div>
            <p class="description1"></p>
        </div>
    </body>

查看脚本标记。这解决了您的问题

Answer 5

使用

添加代码

getElementsByClassName方法（）

`<html>
<body>

<div class="example">First div element with class="example".</div>

<p class="example">Second paragraph element with class="example".</p>

<p>Click the button to change the text of the first div element with class="example" (index 0).</p>

<button onclick="myFunction()">Try it</button>

<p><strong>Note:</strong> The getElementsByClassName() method is not supported in Internet Explorer 8 and earlier versions.</p>

<script>
function myFunction() {
    var x = document.getElementsByClassName("example");
    for(var i=0;i< x.length;i++)
    x[i].innerHTML = "Hello World!";
}
</script>

</body>
</html>`

Answer 6

如果您希望保留ID，请更改以下代码：

脚本：

var pcount = 2// # p
var desc = document.getElementById('description1');
for(i=0; i<pcount;i++){
   document.getElementById('description' + i).innerHTML = desc;
}

HTML

<div>
 <p id="description1"></p>
</div>
<div>
 <p id="description2"></p>
</div>

如何在同一个HTML页面上多次在不同段落上添加相同的字符串？

6 个答案: