Problem with Create new HTML Attribute in Tag Name

html attributes
html custom attributes
add custom attribute to html element javascript
getelementsbytagname
css selectors
add custom attribute to html element jquery
queryselector
javascript set attribute

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.

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>

How You Can Use HTML5 Custom Data Attributes and Why, The HTML class attribute is not meant to store data like this. Its main Each additional piece of information requires us to add a new class to our element. To get rid of these issues, HTML5 has introduced custom data attributes. All attributes on an element whose name starts with data- are data attributes. Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java and XML.

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);
});

Attributes and properties, For instance, let's create a new property in document.body : When the browser parses the HTML to create DOM objects for tags, it recognizes standard attributes and creates DOM But that doesn't matter: attribute names are case-insensitive. But there may be a possible problem with custom attributes. The default of the anchor tag is to go to the top of the document it points to. Name Attribute. The name attribute is used to create a named anchor. When using named anchors you can create links to a specific section on a page, instead of letting your viewer scroll around to find what he/she is looking for.

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
}

Element.tagName, The tagName read-only property of the Element interface returns the For example, if the element is an <img> , its tagName property is "IMG" (for HTML so "span" would be output in case the original tag name was created lowercase. DOMMouseScroll · error · focus · focusin · focusout · gesturechange  The createAttribute() method creates an attribute with the specified name, and returns the attribute as an Attr object. Tip: Use the attribute.value property to set the value of the attribute. Tip: Use the element.setAttributeNode() method to add the newly created attribute to an element.

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'))

HTML name Attribute, The name attribute specifies a name for the element. This name attribute can be used to reference the element in a JavaScript. For form elements it is also used  I would like to use an attribute value for a new attribute name using the Attribute Creator transformer, but this just not working. The new attribute is not created even if we can parameter the Attribute Creator to do so: I am using FME 2018.1.0.1 64bits. I have found this old question with the same issue. According to the accepted answer, the

ASP.NET Core Recipes: A Problem-Solution Approach, A Problem-Solution Approach John Ciliberti The attribute HtmlAttributeNameAttribute can be used to create a Tag Helper that can be applied to any HTML element if the HTML attribute name defined by HtmlAttributeNameAttribute is present. Let's see how to implement a more advanced custom tag, one that we can use to draw a pie chart. Let's create the files necessary for this custom tag: Create a folder and name it piechart-custom-tag. This will be our project folder. Inside the piechart-custom-tag folder, create an HTML file and name it index.html. This file will contain the HTML

HTML DOM createAttribute() Method, The createAttribute() method creates an attribute with the specified name, and setAttributeNode() method to add the newly created attribute to an element. The <form> tag in HTML is used to create form for user input. There are many elements which are used within form tag. For example: <input>, <textarea>, <button>, <select>, <option>, <optgroup>, <fieldset>, <label>.

HTML Attributes, This can be due to slow connection, or an error in the src attribute, or if the user uses a The style attribute is used to add styles to an element, such as color, font, size, and more. At W3Schools we always use lowercase attribute names. Tag Helpers are authored in C#, and they target HTML elements based on element name, attribute name, or parent tag. For example, the built-in LabelTagHelper can target the HTML <label> element when the LabelTagHelper attributes are applied.

Comments
  • var pre is a list of nodes. Loop through them and set your attribute to all if them.
  • Using jQuery: $('pre').addClass("notranslate");
  • Wow, Thank you for solution.