Как добавить элемент ID в определенную строку класса?

Question

Я хотел бы добавить ID в строку, содержащую класс с указанным именем. например. Если сайт заблокирует «div» или «li», который содержит класс с именами, такими как «name-1 name-2 name-3» Эта функция обнаруживает класс с именем «имя-1» и вставляет элемент id = «menu» что строка выглядит так:. Вы можете помочь? Я попробовал:

<div class="menu-item menu-item-object-custom menu-item-has-children"> 
 
I am a DIV or LI element 
 
</div> 
 

 
<button onclick="myFunction2()">Try it</button> 
 

 
<script> 
 
function myFunction2() { 
 
    var x = document.getElementsByClassName("menu-item-has-children")[0]; 
 
     x.document.createElement("id"); 
 
} 
 
</script>

Answer 1

Вам не нужно document это то, что вам нужно:

function myFunction2() { 
    var x = document.getElementsByClassName("menu-item-has-children")[0]; 
     x.id="menu" 
} 

Но вы должны смотреть на JQuery для таких вещей, как, что:

$('.menu-item-has-children').attr('id','menu') 

Все, что вы Редактировать, чтобы сделать для использования jQuery, необходимо добавить этот тег:

<script src=https://code.jquery.com/jquery-1.11.3.min.js></script> к вашему элементу HEAD.

---

Вы можете начать изучать jQuery, узнав о селекторах и attr. С помощью этой ссылки:

• jQuery Selectors
• jQuery attr function

Answer 2

Когда вы получите этот элемент по имени класса, используйте следующий способ дать идентификатор для Юр элемента

<script> 
function myFunction2() { 
    var x = document.getElementsByClassName("menu-item-has-children")[0]; 
    $('.'+x).attr('id','menu'); 
} 
</script> 

Answer 3

Вы можете использовать Document.querySelectorAll() :

function myFunction2() { 
 
    var elements = document.querySelectorAll('.menu-item-has-children'); 
 
    
 
    if (elements.length) { 
 
    elements[0].id = 'menu'; 
 
    } 
 
}

#menu {color:red;}

<div class="menu-item menu-item-object-custom menu-item-has-children"> 
 
    I am a DIV or LI element 
 
</div> 
 

 
<div class="menu-item menu-item-object-custom"> 
 
    I am another DIV or LI element 
 
</div> 
 

 
<button onclick="myFunction2()">Try it</button>