Jump to content

How to write a html property value into its inner content?


pstein

Recommended Posts

Assume the html code of a web page contains the following element

<elemname itemprop="aaaaa" otherprop="11223344">blahbla</elemname>

Now I want to write the value of the property "otherprop" into its inner content (and overwrite existing) just as if the code would be:

<elemname itemprop="aaaaa" otherprop="11223344">11223344</elemname>

How can I achieve this?

jQuery solution is welcomed as well.

Edited by pstein
Link to comment
Share on other sites

  • pstein changed the title to How to write a html property value into its inner content?

Using https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_global_data

<!DOCTYPE html>
<html>
<head>
<script>
window.onload = function (){
swapContent();
}
function showDetails(animal) {
  var animalType = animal.getAttribute("data-animal-type");
  alert("The " + animal.innerHTML + " is a " + animalType + ".");
}

function swapContent(){
ItemElems = document.querySelectorAll("[data-itemprop='aaaaa']");

for (let i = 0; i < ItemElems.length; i++) {
  ItemElems[i].innerHTML = ItemElems[i].getAttribute('data-otherprop');
}

}


</script>
</head>
<body>

<h1>Species</h1>
<p>Click on a species to see what type it is:</p>

<ul>
  <li onclick="showDetails(this)" data-itemprop="aaaaa" id="owl" data-animal-type="bird" data-otherprop="11223344">Owl</li>
  <li onclick="showDetails(this)" data-itemprop="aaaaa" id="salmon" data-animal-type="fish" data-otherprop="11223344">Salmon</li>  
  <li onclick="showDetails(this)" id="tarantula" data-animal-type="spider">Tarantula</li>  
</ul>

</body>
</html>

 

Link to comment
Share on other sites

@dsonesuk

very interesting. thank you.

But not working.

Let me extend my initial simplified example to a real world example.

Go to sample web page:

https://superuser.com/questions/694469/difference-between-netbios-and-smb

As you can see just below the headline appears a time information:

"Asked 8 years, 1 month ago".
I want to replace it by the real date+time which is written into another element property:
 
<time itemprop="dateCreated" datetime="2013-12-29T12:33:25">8 years, 1 month ago</time>

There is only one "dateCreated" element in whole document. So I need no loop.

I code in an additional loaded *.user.js script:

ItemElem = document.querySelector("[itemprop='dateCreated']");
ItemElem.innerHTML = ItemElem.getAttribute('datetime');

Unfortunately it does not work.


Why?

 

 

Link to comment
Share on other sites

Yep! Your right! I Suspect you are not including a function to look at and swap content after the whole page is fully rendered, by use of event or the placement of code below reference it is looking for.

I recreated using my original example, removing for loop coding , indexing and it worked! So its the way your code is setup that is NOT working.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...