如何通过从index.html重新引用div来注入元素?Javascript [已关闭]

r9f1avp5  于 2023-01-07  发布在  Java
关注(0)|答案(2)|浏览(136)

已关闭。此问题需要details or clarity。当前不接受答案。
**想要改进此问题?**添加详细信息并通过editing this post阐明问题。

3天前关闭。
Improve this question
我可以使用以下命令插入元素:

const init = function () {
    var div = document.createElement('div');
    div.innerHTML = '<b>HI!</b>';
    document.body.appendChild(div);
}
init();

然而,我有一个元素可以在我的index.HTML文件中找到,我想引用它,所以我不创建一个新元素,而是使用我的index.HTML中已经存在的元素,然后将其注入到网站中。

<div class="watch">
        <div class="time">
            00:00:00
        </div>
    </div>

我想引用watch和time并将其显示在页面上,或者换句话说,将其注入到页面中。

nwlqm0z1

nwlqm0z11#

选择单个元素最简单的方法是为要选择的元素分配一个ID,可以使用<div id="some_id">分配ID,在js文件中,可以使用document.getElementById引用这些元素。

    • 示例:**
//references the div with an id of "conainer_b"
const containerB = document.getElementById("container_b") ;
containerB.innerHTML = "hello there";
<div id="container_a">
  <div id="container_b">
    some text
  </div>
</div>
q8l4jmvw

q8l4jmvw2#

很容易插入到一个元素中,这里是一个简单的方法使用你的例子HTML。我添加了一些边框只是为了显示什么是在哪里。

const init = function() {
  var div = document.createElement('div');
  div.innerHTML = '<b>HI!</b>';
  document.body.appendChild(div);
  insertIntoWatch("Cheese bits!");
}

function insertIntoWatch(newtext) {
  const newthing = document.createElement('b');
  newthing.textContent = newtext;
  document.querySelector(".watch").appendChild(newthing);
}
init();
.watch {
  border: solid red 1px;
  padding: 1rem;
}

.time {
  border: solid green 0.25rem;
}

.watch>b {
  border: solid 2px blue;
}
<div class="watch">
  <div class="time">
    00:00:00
  </div>
</div>

相关问题