I'm editing a rather primitive forum, and it won't let me modify the HTML, I can only edit the CSS. So, I want to see if it would be possible to add a <div class""> in the HTML with Javascript that encloses more of the existing elements.

The current HTML is as follows:

<div class="details">
<div class="avatar">
<img src="https://i.imgur.com/1r7oGBt.png"></div>
<p><span class="u_title">None</span>
<span class="u_rank"></span></p>
<dl class="u_group"><dt>Group</dt><dd>User</dd></dl>
<dl class="u_posts"><dt>Messages</dt><dd>52</dd></dl>
<dl class="u_scoresystem rep_zero"><dt>Score System</dt><dd>0</dd></dl>
<dl class="u_status"><dt>Estado</dt><dd>Anónimo</dd></dl></div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

And I would like it to be something like this, i.e. using :

    <div class="details">
    <div class="avatar">
    <img src="https://i.imgur.com/1r7oGBt.png"></div><div class="overlay">
    <p><span class="u_title">None</span>
    <span class="u_rank"></span></p>
    <dl class="u_group"><dt>Group</dt><dd>User</dd></dl>
    <dl class="u_posts"><dt>Messages</dt><dd>52</dd></dl>
    <dl class="u_scoresystem rep_zero"><dt>Score System</dt><dd>0</dd></dl>
    <dl class="u_status"><dt>Estado</dt><dd>Anónimo</dd></dl></div></div>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

Is this possible?

Sorry I can't provide much more, I'm a beginner in javascript. Thank you very much.

CodePudding user response：

I think You need something like this

let messages = 52;
let score = 0;
document.body.insertAdjacentHTML('afterbegin',`
  <div class="details">
    <div class="avatar">
    <img src="https://i.imgur.com/1r7oGBt.png"></div><div class="overlay">
    <p><span class="u_title">None</span>
    <span class="u_rank"></span></p>
    <dl class="u_group"><dt>Group</dt><dd>User</dd></dl>
    <dl class="u_posts"><dt>Messages</dt><dd>${messages}</dd></dl>
    <dl class="u_scoresystem rep_zero"><dt>Score System</dt><dd>${score}</dd></dl>
    <dl class="u_status"><dt>Estado</dt><dd>Anónimo</dd></dl></div></div>
`);

in the above code as you can see you can insert messages and score dynamically to the string and also you can add the html dynamically using javascript to the body of your html document

CodePudding user response：

It is very easy, use document.createElement to create the element, add attributes, and append it to the selected element.

var myEl = document.createElement("div");

// use "className" because JavaScript "class" is a reserved keyword.
myEl.className = "myClass";

// Append it
document.querySelector("div").appendChild(myEl);

Working live example:

var myEl = document.createElement("div");

// use "className" because JavaScript "class" is a reserved keyword.
myEl.className = "myClass";

// Append it
document.querySelector("div").appendChild(myEl);

if (!!myEl) {
  myEl.textContent = "You can append other attributes too!";
}

<div>

</div>

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

You can add it as a parent element too:

var currentEl = document.querySelector("div");
currentEl.outerHTML = `<div >${currentEl.outerHTML}</div>`;

You can append many other attributes too.

Read more about createElement at https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement