按 ID returns 获取元素 null

Question

const data = [{color : "red"},{color : "blue"}, {color : "green"} ];

function libraryRoot() {
  load();
  return (`<div id="appDiv">
                    ${data.map(function(value){
                     return `<div><p>Color ${value.color} from libraryRoot</p>`
                    }).join("")}  
                </div>
              `);
}

window.onload = libraryRoot;

function load() {
  let a = document.getElementById("appDiv");
  console.log(a);
}

let defaultLayout = libraryRoot();
document.getElementById("root").innerHTML = defaultLayout;

<div>
  <div id="root"></div>
</div>

大家好，我按照你们的建议修改了脚本，但 return 值仍然在第一个实例中打印 null，然后它打印 div.can 你们帮我看看我哪里出错了.

我想做的就是调用 "appDiv" ID 并向其写入一个按钮功能。喜欢点击{//做某事}。

已更新Codepen Project

Answer 1

在将元素写入 DOM 之前，您将无法访问该元素。
注意 document.getElementById() 中的 word 文档。这是文档API的一个方法。 DOM 代表文档对象模型。

如果您想在此之前修改它，请将您的字符串文字拆分成不同的部分。将特定变量分配给元素的重要部分。

然后修改它们。将它们连接回一个字符串并将它们添加到 DOM.

您的代码可以使用一些注释。有点不清楚你想做什么。在这里，我修改了您的笔，以显示处理数据数组中每种颜色的一些不同方法。您可以基于此执行一些条件逻辑和 return 不同的模板字符串。您可以使用 onclick 属性轻松地将数据对象属性传递给另一个 javascript 函数。

希望这能帮助你更接近你的目标

const data = [{color : "red"},{color : "blue"}, {color : "green"} ];

function alertFunction(color) {
  alert(color);
}

function libraryRoot(){ 
    return('<div id="appDiv">' +

                  data.map(function(value) {
                    var result = `<div><p>Color ${value.color} from libraryRoot</p>`;
                    if (result.indexOf("red") > -1) { // checking if the div includes red
                      return result;
                    } else if (`${value.color}` == "blue") { // checking if the objects color prop includes blue
                      return "<p>blue</p>";
                    } else {
                      return `<button onclick="alertFunction('${value.color}')">Button with function</button>`;
                    }
                  }).join("")
           
           + "</div>"
          ); 
   }
window.onload = libraryRoot;

document.getElementById("root").innerHTML = libraryRoot();

<div>
  <div id="root"></div>
</div>

Answer 2

第一个问题是您首先调用 load()，它试图访问尚不存在的 appDiv 节点。所以重新考虑一下顺序。

第二个问题是您实际上从未将 appDiv 内容添加到 DOM。您可以使用 document.appendChild(libraryRoot()); 之类的东西，尽管我从未将字符串作为 DOM 节点注入 - 我为此使用 createElement。 link 有一些例子。

按 ID returns 获取元素 null

Get element by ID returns null

html

javascript

arrays

innerhtml

getelementbyid