Добавить тег HTML внутри родителя с помощью JavaScript

Мне нужно добавить дочерний тег HTML с помощью JS к родителю без идентификатора или класса (поэтому мне нужно настроить таргетинг на родительский уровень).

Вот что у меня есть:

<div class = "parent">
  <lavel>
    <input type = "radio">
  </label>
</div>

Вот что мне нужно:

<div class = "parent">
  <lavel>
    <input type = "radio">
    <span class = "child-span">content</span>
  </label>
</div>

Любая помощь? Спасибо.

developer.mozilla.org/en-US/docs/Web/API/Node/appendChild

— 25.02.2019 11:37

Покажите свою попытку и сообщите нам, где вы застряли.

— 25.02.2019 11:37

И где твой тест javascript?

— 25.02.2019 11:37

javascript html

25.02.2019 11:36

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

704

Ответы 3

Используйте document.getelementbyid для создания нового div, а затем добавьте то, что требуется в этом div.

Var newDiv = document.createElement("div"); 
                 //and give it some content 
                var newContent = document.createElement("");
                 //add the text node to the newly created div
                newDiv.appendChild(newContent);  
                //add the newly created element and its content into the DOM 
   var currentDiv = document.getElementById(""); 
            document.body.insertBefore(newDiv, currentDiv); 
            }

document.getElementById не будет Создайте новым div, он будет искать существующий.

— 25.02.2019 11:40

Это позволяет вам выбрать родительский элемент, а затем добавить любые атрибуты, которые вы хотите, через javascript. Очень эффективный.

— 25.02.2019 11:52

25.02.2019 11:39

ЕСЛИ jQuery разрешен

 $('.parent label').append('<span class = "child-span">content</span>');

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class = "parent">
  <label>
    <input type = "radio">
  </label>
</div>

25.02.2019 11:40

Доступ к дочерним элементам родителя:

const el = document.createElement('span')
el.classList.add('child-span')
el.innerText = 'Hello!'

document.querySelector('.parent').children[0].appendChild(el)

<div class = "parent">
  <label>
    <input type = "radio">
  </label>
</div>

Или запросите элемент напрямую:

const el = document.createElement('span')
el.classList.add('child-span')
el.innerText = 'Hello!'

document.querySelector('.parent label').appendChild(el)

<div class = "parent">
  <label>
    <input type = "radio">
  </label>
</div>

вместо children[0] более надежным способом будет поиск нужного узла. Это все еще можно сделать напрямую с помощью селектора запросов, если вы передадите .parent label. Тем не менее, это только соображение при реализации решения - я думаю, что приведенный здесь код является хорошей иллюстрацией того, как это сделать, детали могут различаться в зависимости от реализации.

— 25.02.2019 11:42

25.02.2019 11:40