Create New HTML Attribute Automatically Using JavaScript

In a website element, there are a lot of languages that people hear. The basic example is word tag, attribute and element. All three have different meanings. This time, I will discuss a little about the HTML attribute, which you may have heard of.

HTML attributes or in English is an HTML attribute is additional information given in an HTML tag. Each attribute has a name and value written like name="value", value is enclosed in quotation marks one or two. 

Example:

<p class="hello"> lorem ipsum dolor sit amet </p>

class="hello" is an HTML attribute, which is in a <p> tag. Attributes are very useful in using websites to provide website information. 

Actually, the purpose of this article is to share a tutorial on how to add new attribute to a tag automatically, without having to enter the beginning. 

This is my own experience, where at that time I wanted to add attribute class='notranslate' in <pre>, but it's impossible if I have to edit one by one. Finally I use JavaScript to add new attribute.

Read more: How to Add Syntax Highlighter to Code with Prism JS

This Pure JavaScript  without using jQuery or anything else. This JavaScript can be applied to Blogger and other CMS.

ad: situs bandar casino In this JavaScript, I give a sample if you want to add an attribute class="notranslate" in <pre> tag. You can develop it according to your needs. Copy the code below before </body> in your HTML template. 

<script type='text/javascript'>
//<![CDATA[
var pre = document.getElementsByTagName("PRE");

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

})
//]]>
</script>

Note: Pay attention to yellow mark. Adjust to your needs.

The way JavaScript works above is to use document.getElementsByTagName and call the required tag, then use document.createAttribute to make the desired new HTML attribute.

Of course this is very useful for you, if you make an article Blogging Tutorial, but want to add a new attribute to the <pre> in HTML tags without having to edit one by one.

May be useful :)