tl;dr jsFiddle

Question

我正在尝试更改h1标记的文字，而不是其他内部html的文字。这是我的代码

document.getElementById("wpbody-content").getElementsByClassName("wrap")[0].getElementsByTagName('h1')[0].innerHTML = 'Candidate Application Forms';

HTML代码

<div id="wpbody-content">
  <div class="wrap">
    <h1>All Forms <a class="title-action" href="">Add New</a></h1>
  </div>
</div>

我只需要更改标记内的其他<h1>All Forms</h1>文字。

我需要在没有jQuery

的情况下这样做

Answer 1

插入一个额外的跨度：

<div id="wpbody-content">
  <div class="wrap">
    <h1><span id="allForms">All Forms</span> <a class="title-action" href="">Add New</a></h1>
  </div>
</div>

然后用：

操纵它

document.getElementById('allForms').innerHTML = 'Candidate Application Forms';

Answer 2

将所有表单放在包含

的ID的范围内

<span id="spanId">All Forms </span>

现在更改带有id

的span的内容

Answer 3

如果你想要这样做而不改变HTML：

但最好的方法可能是将All Forms包装成一个元素，然后更改它。

＆＃13;

var elt = document.getElementById("wpbody-content")
    .getElementsByClassName("wrap")[0].getElementsByTagName('h1')[0];

elt.innerHTML = 'Candidate Application Forms ' + elt.children[0].outerHTML;

＆＃13;

<div id="wpbody-content">
    <div class="wrap">
         <h1>All Forms <a class="title-action" href="">Add New</a></h1>

    </div>
</div>

＆＃13;

Answer 4

这取决于wrap-html标记中的 HTML ，您可以在replace字符串上使用javascript innerHTML函数，使用简单的正则表达式，如{{1 }}

/<h1>[^<]*/ 匹配“＆lt; h1＆gt; ...直到下一个更少的符号（/<h1>[^<]*/）”

这是一个例子：

   var newHeader = 'Candidate Application Forms'
   var htmlValue = document.getElementById("wpbody-content").getElementsByClassName("wrap")[0].innerHTML;
   document.getElementById("wpbody-content").getElementsByClassName("wrap")[0].innerHTML = 
htmlValue.replace(/<h1>[^<]*/,"<h1>" + newHeader);
// Tested with Win7 on Chrome 46+

Answer 5

tl;dr jsFiddle

每个文本块实际上都是TextNode。你可以想象你的HTML：

<h1>
    <text data="All Forms" />
    <a class="title-action" href="">
        <text data="Add New" />
    </a>
</h1>

您可以使用HTMLElement.childNodes属性访问这些元素：

var children = elm.childNodes;
for(var i=0,l=children.length; i<l; i++) {
    if(children[i] instanceof Text)
        return children[i];
}

HTMLElement.children是没有Text个节点的列表。

Answer 6

您只需要为元素添加一个ID，然后就可以根据需要进行更改。

document.getElementById("change").innerHTML="it is changed";

<div id="wpbody-content">
  <div class="wrap">
    <h1 id="change">All Forms <a class="title-action" href="">Add New</a></h1>
  </div>
</div>

Answer 7

如果您不想更改文档的当前结构，建议您仅更改H1节点的第一个孩子：

0.13.3

Javascript更改h1文本不是内部其他html

7 个答案:

tl;dr jsFiddle