Home Change class of element in template
Reply: 0

Change class of element in template

user1390 Published in June 23, 2018, 4:28 am

I have an html template which, on click on a button, I clone and append to a div. I want to change the class name of a div which is nested inside the template, however, I do not know how. I tried looking it up but I couldn't find any way to do that in JavaScript, the only posts I found were about Visual Studio Code etc, however, as mentioned, I want to do this in JavaScript.

The template look something like this:

<template id="newElement">
    <div class="wrapper">
        <p>Test Paragraph</p>

This is how I clone and append the template:

function addElement() {

    var listElement = document.getElementById('newElement');
    var cloneTemplate = listElement.content.cloneNode(true);
    var list = document.getElementById("list");


Now, I want to change the class of the newly generated element. I tried this using:

cloneTemplate.content.className = "newName";
cloneTemplate.className = "newName";

I also tried accessing the div inside the template and changing its class, however, I keep getting the error message that the element I try to access is undefined. Does anyone know how I could fix this?

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.496264 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO