如何用变量(或更简单的方法)替换HTML元素的所有实例

Question

我有一个HTML片段，我一直在重复文本，并且希望能够设置一个变量，并让文档被更新以显示我有占位符的文本。HTML没有任何身体，头部等标签，因为这将是一个更大的网页的子部分。

如果有人知道，我也可以使用任何更简单/更简单的方法来完成这一任务，但如果不知道，最好使用一个只使用JavaScript的解决方案。

当前的问题是，通过使用"document.getElementById()"，它将只替换元素的第一个实例，这完全是它应该做的事情，但是我需要一个替换所有实例的解决方案。

<script type="text/javascript">
    var Name = "Some Name";
    var WebAddress = "https://example.com";
    window.onload = function Placeholder() {
        document.getElementById('Placeholder-Name').innerHTML = Name;
        document.getElementById('Placeholder-WebAddress').innerHTML = WebAddress;
        document.getElementById('Placeholder-WebAddress-href').href = WebAddress;
    }
</script>
<h1><placeholder id="Placeholder-Name"></placeholder></h1>

<p>
    Blah blah blah<a id="Placeholder-WebAddress-href" href="#"><placeholder id="Placeholder-WebAddress"></placeholder></a> blah blah blah <placeholder id="Placeholder-WebAddress"></placeholder>.
    And some more blah <placeholder id="Placeholder-WebAddress"></placeholder>.
</p>

Answer 1

document.querySelectorAll()是您应该使用的方法，而不是document.getElementsByClassName()，因为它返回在某些情况下导致意外值的Live。最重要的是，一旦您获得了一个标记集合，您必须使用一个数组方法或一个循环遍历每个标记。

详细信息可以在评论和演示内容中找到(即阅读所有内容)。

​

/** insStr()
@Param: selector [string]...........: CSS syntax to target tags
        string [string].............: Text content or attribute value
        attribute [string](optional): Name of attribute to modify
This function will insert a string into a given group of tags, either as text content or an 
attribute value.
//A - Pass a selector, a string for text in between the tags.
      If it's for an attribute then add it as third parameter
//B - Collect all tags that match selector
      '#ID' -- '.CLASS' -- '[ATTRIBUTE=VALUE]' -- 'TAGNAME'
      This collection is called a NodeList
//C - Iterate through the NodeList in a for...of loop
//D - if the third parameter exists, set string as the value
//E - otherwise set string as text content
*/
function insStr(selector, string, attribute = null) { //A
  const nodes = document.querySelectorAll(selector); //B  
  for (let node of nodes) { //C
    if (attribute) {
      node.setAttribute(attribute, string); //D
    } else {
      node.textContent = string; //E
    }
  }
  return false;
}

insStr('#main-title', `Prefix Ids with a Hash: #. Also IDS MUST BE UNIQUE! NEVER DUPLICATE AN ID!!!`);

insStr('.content', `Prefix class with a dot: .`);

insStr('[name=field]', `If there's no id or class, try any attribute/value an element has and wrap it in brackets: [...] 
-- Also note that the third parameter is setting the value attribute`, 'value');

insStr('a', `If the element is totally void of any usable attribute/value you can use the tagName -- ex. 'a' for <a>`);

insStr('a', `https://stackoverflow.com`, 'href');

insStr('article', `BTW there's no such thing as <placeholder> tag -- it's not standard. Follow standards else it'll come back and bite you in the arse`);

input {
  display: block;
  width: 99%;
}

<h1 id='main-title'></h1>
<p class='content'></p>
<p class='content'></p>
<p class='content'></p>
<p class='content'></p>
<input name='field'><br>
<a href=''></a><br>
<a href=''></a><br>
<a href=''></a><br>
<a href=''></a><br><br>
<article></article>

​

Answer 2

当你有一个ID时，只有一个元素可以有这个ID。相反，你要做的是给每个元素分配一个类名。然后你可以打电话

document.getElementsByClassName('placeholderclass')

它将返回具有该类名的元素数组。若要将相同的变量分配给每个变量，请使用for循环对它们进行迭代并分配所需的值。

Answer 3

应该为唯一的HTML元素保留ID。通常，您不希望有多个具有特定ID的元素。

由于页面上将有这些元素的多个实例，所以应该尝试在HTML元素中使用"class“而不是"id”。然后，您可以使用javascript方法“document.getElementsByClassName(类名)”来选择这些元素，并同时对它们进行更改。

示例：

<a class="placeholder-webaddress-href" href="#">Example</a>

可以用

document.getElementsByClassName("placeholder-webaddress-href")