Javascript добавление элемента в другой элемент без идентификатора - PullRequest
Новая
       6

Javascript добавление элемента в другой элемент без идентификатора

0 голосов
/ 14 июля 2020

Цель - хочу добавить «Нажатие на пуск!» внутри элемента « main » моего Html файла.

Это тело моего 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.
}

Ответы [ 2 ]

4 голосов
/ 14 июля 2020

Используйте 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>
0 голосов
/ 14 июля 2020

Или вы можете использовать вместо этого тэг. 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<h1></h1>

<p>First paragraph.</p>

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

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

<main></main>

<script>
    let btn = document.getElementById("start")
    let main = document.getElementsByTagName("main")[0]
    btn.addEventListener('click', function() {
        let elem = document.createElement('span');
        elem.innerText = "Start was clicked!";
        main.appendChild(elem)
    });
    // This just appends to bottom of the page, how would I add it to the main element without an id.
</script>


</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...