时间戳

首页 > 解决方案 > Javascript将一个元素添加到另一个没有id的元素中

javascript - Javascript将一个元素添加到另一个没有id的元素中

问题描述

目标 - 我想添加“点击开始！” 在我的 Html 文件的“ main ”元素中。

这是我的 Html 文件的主体。

   <body>
     <h1></h1>

     <p>First paragraph.</p>

     <p class="intro">Second <span>paragraph</span>.</p>

     <button id="start">Start</button>

     <main></main>
</body>

这是我的js代码。

    let button = document.querySelector('#start')
    button.addEventListener('click', function(){
    let elem = document.createElement('span');
    elem.innerText = "Start was clicked!";
    document.body.appendChild(elem);
}); // This just appends to bottom of the page, how would I add it to the main element without an id.
}

标签： javascriptdom

解决方案

用于document.querySelector("main")选择<main>元素。

let button = document.querySelector('#start')
let main = document.querySelector('main')
button.addEventListener('click', function() {
  let elem = document.createElement('span');
  elem.innerText = "Start was clicked!";
  main.appendChild(elem);
});
<h1></h1>

<p>First paragraph.</p>

<p class="intro">Second <span>paragraph</span>.</p>

<button id="start">Start</button>

<main></main>

推荐阅读