时间戳

首页 > 解决方案 > 用 innerHTML 替换 HTML - Javascript

javascript - 用 innerHTML 替换 HTML - Javascript

问题描述

我需要编写一个 JS 功能来读取整个 HTML 文档并用其他文本替换文本。

HTML -

<ul>
  <li>
    <a id="aId" href="https://www.w3schools.com" target="_blank"> Link1 </a>
  </li>
  <li>
    <a id="bId" href="https://www.w3schools.com" target="_blank"> Link2 </a>
  </li>
  <li>
    <a href="https://www.w3schools.com" target="_blank"> Link3 </a>
  </li>
</ul>

Javascript代码 -

var strMessage1 = document.getElementById("aId") ;
var first = 'target="_blank"';
var second = 'target="_blank" rel="noopener noreferrer" onClick="alert(\'Hello World!\')"';

strMessage1.innerHTML = strMessage1.innerHTML.replace(first, second) ;

javascript 应该能够运行整个 HTML 并将第一个 var 替换为第二个 var（在脚本中定义），无论在哪里找到。这是第一个 id 的示例 - 'aId'。

问题 - 脚本如何覆盖和替换

也是。

演示 - http://jsfiddle.net/nikhil_gupta/rzy3ajhx/。

注意 - 不使用 jQuery。

标签： javascripthtmlinnerhtml

解决方案

.innerHTML改变元素的内容（开始和结束标签之间的内容）。您的代码尝试更改元素属性的值。这些不是一回事。

此外，了解使用innerHTML(and outerHTML) 的含义也很重要。

  • 它们都导致必须重新构建 DOM，然后重新绘制和重新流动，这在资源方面非常昂贵。
  • 它们的使用还将删除任何以前设置的事件处理程序。
  • 它们会在您的应用程序中打开安全漏洞。
  • 它们通常伴随着字符串连接和嵌套引号的 gobs 和 gobs。

要更改元素属性的值，只需访问要修改的 HTML 属性作为 JavaScript 对象的属性或使用element.setAttribute(attributeName, value)DOM 方法。

问题 - 脚本如何覆盖和替换

  • 身份证号码？
  • Link3，哪个没有id？

也是。

当你想改变多个元素时，你需要将它们放入一个集合或数组中，然后你可以循环它们。可以通过许多与 s 完全无关的不同方式将它们放入一个组中id（按标签名称、按 CSS 类、按文档中的位置、按属性值等）。在您的示例中，如果我们想要修改项目符号内的所有链接，target=_blank它们的值是，我们可以使用 CSS 选择器和方法href通过位置和属性值来定位它们。.querySelectorAll()您会在下面的示例中注意到，我已经id从 HTML 中完全删除了属性，并且代码仍然有效。

最后，您不应该使用内联 HTML 事件属性（onclick等）来配置事件处理回调函数。这是一项已有 25 年历史的技术，每个新的 Web 开发人员都在不了解为什么不应该使用它的情况下复制和粘贴它。相反，使用现代的、基于标准的代码和.addEventListener()DOM API。

// Get the elements you wish to work on into an Array
// Here, we're selecting <a> elements that have an href attribute with a value of _blank 
// that are direct children of <li> elements:
var elementsToChange = Array.prototype.slice.call(document.querySelectorAll("li > a[target='_blank']"));

// We only need to worry about what's going to change
var newRel = 'noopener noreferrer'

// This will be the click event callback function
function doAlert(){
  alert('Hello World!');
}

// Loop over the array
elementsToChange.forEach(function(element){
  // Just access the HTML attribute you want to modify as a property of the JavaScript object
  element.rel = newRel;
    
  // Or, use the DOM API
  element.setAttribute("rel", newRel); 
  
  // Either way the DOM API should always be used to set up event handlers
  element.addEventListener("click", doAlert);
});
<ul>
  <li><a href="https://www.w3schools.com" target="_blank">I will be modified by the code</a></li>
  <li><a href="https://www.w3schools.com">I WON'T be modified by the code!</a></li>
  <li><a href="https://www.w3schools.com" target="_blank">I will be modified by the code</a></li>
</ul>

推荐阅读