Problem with Create new HTML Attribute in Tag Name

Question

I want to add attribute class='notranslate' in <pre> to prevent Google Translating content in <pre> tag.

I use this JavaScript, and it work.

<script type='text/javascript'>
//<![CDATA[
var pre = document.getElementsByTagName("PRE")[0];
var att = document.createAttribute("class");
att.value = "notranslate";
pre.setAttributeNode(att);
//]]>
</script>

But there is problem. That's JavaScript only work at first <pre> tag.

Anyone can help me, how to Add class='notranslate' in entire tag <pre> ?

Thank you and sorry for my english.

var pre is a list of nodes. Loop through them and set your attribute to all if them. — Nate
– Nate, Commented Feb 7, 2019 at 6:07

Lux · Accepted Answer · 2019-02-07 06:10:03Z

1

Dont do document.getElementsByTagName("PRE")[0]; which gives you the first element (thats what the[0] is for) but use a loop.

document.getElementsByTagName("PRE").forEach(pre => {
  const att = document.createAttribute("class");
  att.value = "notranslate";
  pre.setAttributeNode(att);
});

answered Feb 7, 2019 at 6:10

Lux

18.3k5 gold badges48 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ellipsis · Accepted Answer · 2019-02-07 06:10:40Z

0

Use forEach to iterate over the values of the object which is returned by the getElementsByTagName and create and append attributes in the loop

var pre = document.getElementsByTagName("PRE");

Object.values(pre).forEach((x)=>{
var att = document.createAttribute("class");
att.value = "notranslate";
x.setAttributeNode(att);
})

<pre>a</pre><pre>b</pre><pre>c</pre>

answered Feb 7, 2019 at 6:10

ellipsis

12.2k2 gold badges19 silver badges33 bronze badges

1 Comment

Hafid Maulana Over a year ago

Wow, Thank you for solution.

Arthur Musgrove · Accepted Answer · 2019-02-07 06:12:22Z

0

It only works at the first pre tag because you are selecting the first element of the returned array.

Try

for (let pre of document.getElementsByTagName('pre')) {
    // ... your manipulation code
}

answered Feb 7, 2019 at 6:12

Arthur Musgrove

1112 bronze badges

Comments

shyam · Accepted Answer · 2019-02-07 06:14:49Z

0

You are selecting only the first element by adding [0]. You need to iterate over the entire NodeList

You can also use the classList.add to prevent clobbering of existing classes

Object.values(document.getElementsByTagName('pre'))
    .forEach(pre => pre.classList.add('notranslate'))

answered Feb 7, 2019 at 6:14

shyam

9,3864 gold badges32 silver badges45 bronze badges

Collectives™ on Stack Overflow

Problem with Create new HTML Attribute in Tag Name

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related