JavaScript: добавить некоторый контент в parentNode

Question

Какой может быть лучший способ добавить контент в ParentNode, если у него есть несколько дочерних узлов без идентификатора.

условие:

 <div class="parent_div">
       <div class="child_div_1" >  I need to add contents inside this div </div> 

       <div class ="child_div_2" onmouseover="addClass(this)"> </div>
    </div> 

My possible solution :  function addClass(obj) {

       obj.parentNode.firstChild.appendChild(...);
    }

Но у меня есть сомнения, если кто-то изменитсяположение первого ребенка, то что?по вашему мнению, что может быть лучшим способом решить эту проблему.

Answer 1

Используйте JQuery:

function addClass(obj) {

       $(obj.parentNode)
               .find("ClassName_in_which_you_want_to_append")
                  .append("your_derived_contents");
   }

Примечание: find () просто найдите имя_класса как хотите.Положение не имеет значения.Он просто смотрит внутрь родительского узла.

append () : просто добавьте содержимое как дочерний элемент

Надеюсь, это поможет ваммного.

Answer 2

пожалуйста, добавьте идентификаторы для тех тегов, на которые вы хотите сослаться, так как ваш код javascript намного проще и точнее для запуска.

Answer 3

Я не уверен, что понимаю. Должно быть что-то, определяющее, в какой элемент вы хотите поместить содержимое, и, если это так, у него должен быть идентификатор (уникальный элемент заслуживает уникального поля, верно?)

Если те имена классов, которые вы определили (child_div_1), имеют значение для элемента, в который нужно вставить контент, вы можете использовать метод getElementsByClassName, чтобы выбрать правильный элемент.

function addClass(obj) {
  obj.parentNode.getElementsByClassName('child_div_1')[0].appendChild(/* ... */);
}

Если имена классов, которые вы дали в примере, являются произвольными, вам придется добавить некоторую дополнительную информацию к элементам вашего блока.