Monday, February 25, 2019

Create New HTML Attribute Automatically Using JavaScript

How to Create New HTML Attribute Automatically with Pure JavaScript in Blogger. Pure Javascript Blogger tutorial

How to Create New HTML Attribute Automatically with Pure JavaScript in Blogger



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.

What is HTML Attribute?

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. 

Add new Attributes to HTML tag automatically

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