Change element:after content depending on textContent of seperate element using Vanilla JavaScript

Question

I want to inherit the textContent of a seperate span element to the content of an :after style using Vanilla JavaScript.

As seen below in HTML, the span with className span-class, is the element that I want to extract the textContent from. The div with className sample, is the parent of the div with className random (which houses span-class), and the p element for which I want to apply an :after style, with an inherited content:" ";.

These elements are repeated throughout the website with the same className, and hence require an Array as shown below in the Desired Outcome.

HTML

<div class="sample">
 <div class="random">
  <span class="span-class">example</span>
 </div>
 <p class="p-text">some random text, some random text, some random text</p>
</div>


<div class="sample">
 <div class="random">
  <span class="span-class">example2</span>
 </div>
 <p class="p-text">some random text, some random text, some random text</p>
</div>

CSS

.p-text:after{
  content: "text I want to be dynamic";
}

Desired Outcome:

NOTE: I understand that pText:after.content does not work, however it best characterizes what I want to achieve

var sample = Array.from(document.querySelectorAll(".sample"));

sample.forEach(function(smpl) {

var textContent = smpl.querySelector(".span-class").textContent;
var pText = smpl.querySelector(".p-text");

  if (textContent === "example") {
    pText:after.content = "example";
   } else if (textContent === "example2") {
    pText:after.content = "example2";
   }
 })

ALSO NOTE: Creating another span element and placing it at the end of the textContent of .p-text, although a solution, is not an option.

Thanks in advance for any solutions!

checkout this answer https://stackoverflow.com/a/5734583/2417602 — vikscool, May 17 '18 at 04:40

score 0 · Answer 1 · answered May 17 '18 at 05:04

You get get all the elements with this class p-text and from here get the it's parent and use querySelector to get the specific child node. Then get it's content and update the text content of the .p-text element

document.querySelectorAll('.p-text').forEach(function(item) {
  let m = item.parentNode.querySelector('.span-class').textContent;
  let ItemContent = item.textContent + ' ' + m;
  item.innerHTML = ItemContent
})

<div class="sample">
  <div class="random">
    <span class="span-class">example</span>
  </div>
  <p class="p-text">some random text, some random text, some random text</p>
</div>

score 0 · Answer 2 · answered May 17 '18 at 05:50

You can also use css variables in modern browsers.

.p-text:after{
  content: var(--p-text-content, "");
  color: green;
}

Like this :

var sample = Array.from(document.querySelectorAll(".sample"));

sample.forEach(function(smpl) {

 var textContent = smpl.querySelector(".span-class").textContent;
 var pText = smpl.querySelector(".p-text");

 pText.style.setProperty("--p-text-content", `'${textContent}'`);
})

.p-text:after{
  content: var(--p-text-content, "");
  color: green;
}

<div class="sample">
 <div class="random">
  <span class="span-class">example</span>
 </div>
 <p class="p-text">some random text, some random text, some random text</p>
</div>

KAindex · Accepted Answer · 2018-05-17T06:10:09.197

HTML Before

<div class="sample">
  <div class="random">
    <span class="span-class">example</span>
  </div>
  <p class="p-text">some random text, some random text, some random text</p>
</div>

<div class="sample">
  <div class="random">
    <span class="span-class">example2</span>
  </div>
  <p class="p-text">some random text, some random text, some random text</p>
</div>

CSS

.p-text:after{
  content: attr(data-content);
}

Targeting attribute data-content within the p element allows for its manipulation using el.dataset.content = "";, as shown below using JavaScript.

Note, if an element does not already contain attribute data-content, the JavaScript below will automatically create one and implement the desired changes accordingly.

JavaScript

var sample = Array.from(document.querySelectorAll(".sample"));

sample.forEach(function(smpl) {

    var textContent = smpl.querySelector(".span-class").textContent;
    var pText = smpl.querySelector(".p-text");
    if (textContent === "example") {
      pText.dataset.content = "example";
    } else if (textContent === "example2") {
      pText.dataset.content = "example2";
    }
})

Outcome After JS/CSS

<div class="sample">
  <div class="random">
    <span class="span-class">example</span>
  </div>
  <p class="p-text" data-content="example">
    some random text, some random text, some random text.
    ::after
  </p>
</div>

<div class="sample">
  <div class="random">
    <span class="span-class">example2</span>
  </div>
  <p class="p-text" data-content="example2">
    some random text, some random text, some random text.
    ::after
  </p>
</div>

Change element:after content depending on textContent of seperate element using Vanilla JavaScript

3 Answers3