时间戳

首页 > 解决方案 > Javascript setAttribute 无法正常工作

javascript - Javascript setAttribute 无法正常工作

问题描述

我正在尝试实现 w3schools 提供的 includeHTML() 函数。

https://www.w3schools.com/howto/howto_html_include.asp

如果我手动创建一个 div，它可以正常工作，就像在网站中一样：

<div w3-include-html="awebsite.html"></div>

但是，如果我尝试使用 Javascript 创建一个 div 则它不起作用，例如：

var htmlIncluder = document.createElement("div");
htmlIncluder.setAttribute("w3-include-html", "awebsite.html");
document.body.appendChild(htmlIncluder);

是不是因为 div 默认没有 w3-include-html 属性？我应该怎么做才能完成这项工作？

感谢帮助！

更新，这是我的 index.html，为了更清楚事物出现的顺序，它还显示了 includeHTML 函数：

<script>
function includeHTML() {
  var z, i, elmnt, file, xhttp;
  /*loop through a collection of all HTML elements:*/
  z = document.getElementsByTagName("*");
  for (i = 0; i < z.length; i++) {
    elmnt = z[i];
    /*search for elements with a certain atrribute:*/
    file = elmnt.getAttribute("w3-include-html");
    if (file) {
      /*make an HTTP request using the attribute value as the file name:*/
      xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
        if (this.readyState == 4) {
          if (this.status == 200) {elmnt.innerHTML = this.responseText;}
          if (this.status == 404) {elmnt.innerHTML = "Page not found.";}
          /*remove the attribute, and call this function once more:*/
          elmnt.removeAttribute("w3-include-html");
          includeHTML();
        }
      }
      xhttp.open("GET", file, true);
      xhttp.send();
      /*exit the function:*/
      return;
    }
  }
}
</script>
</head>
<body>
<!--this is the manually created div that works-->
<div w3-include-html="2.html"></div>
<!-- divs created with js.js have the correct attribute but don't show any content -->
<script src="js.js"></script>
<script>
includeHTML();
</script>
</body>

这是 js.js 创建应该包含 includeHTML(); 的 div 的部分。内容。将 div 添加到添加到网格的单元格中，并将整个内容添加到 document.body 中。它在站点中可见，因此它是正确的，例如文本元素“中间”是可见的。页面分为页眉、中间和页脚作为网格，所有这些也是可见的。

cell.className = "middle";
cell.id = "middle-"+cellIdNo;
var text = document.createTextNode("middle");
var htmlIncluder = document.createElement("div");
htmlIncluder.setAttribute("w3-include-html", "2.html");
cell.appendChild(text);
cell.appendChild(htmlIncluder);

标签： javascripthtml

解决方案

因为不存在body.[something]，所以该元素甚至没有被添加到 DOM 中。

使用document.body或document.querySelector('body')等等...

var htmlIncluder = document.createElement("div");
htmlIncluder.setAttribute("w3-include-html", "awebsite.html");
document.body.appendChild(htmlIncluder);

更新：由于问题已更新。

我不明白，It's not working因为它下来了。

但是，因为它不是HtmlElement的内置属性。

可以通过attributes property或访问自定义属性getAttribute() method 

var htmlIncluder = document.createElement("div");
htmlIncluder.setAttribute("customattribute", "Custom Attribute Value");
htmlIncluder.setAttribute("class", "div");
document.body.appendChild(htmlIncluder);

var el = document.querySelector('.div');
console.log(el.getAttribute('CustomAttribute'));
console.log(el.attributes['customattribute'].value);
.as-console-row-code{font-size:1.2em !important;}
.div{
  width: 100px;
  height: 100px;
  background: orange;
}

推荐阅读