Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Вставить элемент внутрь другого (https://javascript.ru/forum/jquery/60700-vstavit-ehlement-vnutr-drugogo.html)

kolhoz 15.01.2016 11:32

Вставить элемент внутрь другого
 
Добрый день, на сайте на Joomla, есть модуль с классом .moduletable. Код такой

<div class="moduletable">
	<h3>Заголовок</h3>
	Текст
</div>


Как вставить элемент span внутрь h3 чтобы было так:

<div class="moduletable">
	<h3><span>Заголовок</span></h3>
	Текст
</div>


В шаблоне явно jquery не подключен. Подключение происходит из компонента K2.

рони 15.01.2016 12:16

kolhoz,
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <style type="text/css">
h3 > span{
    background-color:#7CFC00;
  }

  </style>
  <meta charset="utf-8">

    <script>
    window.addEventListener('DOMContentLoaded', function() {
      [].forEach.call( document.querySelectorAll('.moduletable h3'), function(el) {
       el.innerHTML = "<span>" + el.innerHTML + "<span/>"
});
        });
    </script>
</head>

<body>
<div class="moduletable">
	<h3>Заголовок</h3>
	Текст
</div>


</body>

</html>

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <style type="text/css">
h3 > span{
    background-color:#7CFC00;
  }

  </style>
  <meta charset="utf-8">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
    <script>
      jQuery(function () {
           $(".moduletable h3").wrapInner("<span/>")
       });
    </script>
</head>

<body>
<div class="moduletable">
	<h3>Заголовок</h3>
	Текст
</div>


</body>

</html>

kolhoz 15.01.2016 16:04

Спасибо!

kolhoz 15.01.2016 16:17

Скажите, по первому принципу пытаюсь вставить код <i class="fa fa-facebook-official"></i> внутрь элемента span с классом facebookslogin так, но не работает:

<script>
window.addEventListener('DOMContentLoaded', function() {

[].forEach.call( document.querySelectorAll('.ssslogggin .facebookslogin'), function(el) {
el.innerHTML = "<i class="fa fa-facebook-official"></i>" + el.innerHTML
});

});
</script>

подскажите в чем ошибка? Может надо как-то экранировать названия классов?

рони 16.01.2016 22:39

Цитата:

Сообщение от kolhoz
"<i class=\"fa fa-facebook-official\"></i>"

Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:
[js]
... ваш код...
[/js]


О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.


Часовой пояс GMT +3, время: 00:43.