Блог

Главная - Вопросы по программированию - Как обернуть html-текст в интервалы с помощью javascript

Как обернуть html-текст в интервалы с помощью javascript

#javascript #html #dom

#javascript #HTML #dom

Вопрос:

Я хочу обернуть текст из html в промежуток, поэтому он должен быть таким

 <p>Test yes</p>

в

 <p><span>Test</span></p>

с javascript dom. Кто-нибудь может мне помочь с этим?

Ответ №1:

Попробуйте это.

 document.getElementsByTagName("p")[0].innerHTML = '<span>'   document.getElementsByTagName("p")[0].innerHTML   '</span>';  
 <p>Test</p>

Ответ №2:

 document.querySelectorAll("p").forEach(element => {
    element.innerHTML = '<span>'   element.innerHTML   '</span>';
});  
 <p>Test1</p>
<p>Test2</p>
<p>Test3</p>
<p>Test4</p>

Ответ №3:

Не просто текст, на случай, если у вас есть и другие html-объекты, внутри элемента, подобного p тегу here, вот что вы можете сделать :

 var parent = document.querySelector("p");
parent.innerHTML = "<span>"   parent.innerHTML   "</span>"

Ответ №4:

Посмотрите этот фрагмент:

 <!DOCTYPE html>
<html>
<head>
    <title>Test</title>
</head>
<body>
    <p id="test_para">Test yes</p>
    <script type="text/javascript">
        var p = document.getElementById('test_para')

        var span = document.createElement('span');
        var node = document.createTextNode(p.innerHTML);
        span.appendChild(node);

        p.innerHTML  = '';
        p.appendChild(span);
    </script>
</body>
</html>

Во фрагменте мы выполнили следующие действия:

  1. Сначала мы присвоили id test_para нашему абзацу. С помощью этого идентификатора мы находим его и сохраняем в переменной p .
  2. Во-вторых, мы создаем элемент span, используя createElement() метод.
  3. В-третьих, мы создаем текстовый узел с помощью createTextNode() метода и сохраняем текст нашего абзаца внутри него.
  4. Далее мы устанавливаем добавить этот узел в элемент span, который мы только что создали с помощью appendChild() метода.
  5. Наконец, мы делаем наш абзац пустым и добавляем к нему вновь созданный элемент span с помощью appendChild() метода.

Есть другой, менее сложный способ сделать это:

 <!DOCTYPE html>
<html>
<head>
    <title>Test</title>
</head>
<body>
    <p id="test_para">Test yes</p>
    <script type="text/javascript">
        var p = document.getElementById('test_para')
        p.innerHTML  = '<span>' p.innerHTML '</spn>';
    </script>
</body>
</html>

Здесь мы размещаем наш абзац, используя id, как мы делали во фрагменте выше. Но вместо того, чтобы создавать HTML-элементы с помощью JavaScript, мы просто изменяем HTML внутри нашего абзаца, используя его свойство innerHTML.

Ответ №5:

Для этого достаточно одной строки!

 document.querySelectorAll("p").forEach(e => e.innerHTML = `<span>${e.innerHTML}</span>`)