pstein Posted February 24, 2022 Share Posted February 24, 2022 (edited) 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 February 24, 2022 by pstein Link to comment Share on other sites More sharing options...
dsonesuk Posted February 24, 2022 Share Posted February 24, 2022 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 More sharing options...
pstein Posted February 25, 2022 Author Share Posted February 25, 2022 @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 More sharing options...
dsonesuk Posted February 25, 2022 Share Posted February 25, 2022 QuerySelector() produces a list of matching selector elements which is read by using a index such as used in for loop. Now! how would you index a single item using index key here. Link to comment Share on other sites More sharing options...
pstein Posted February 28, 2022 Author Share Posted February 28, 2022 @dsonesuk. I am confused: Does QuerySelector() really produce a list of elements? According to: https://developer.mozilla.org/de/docs/Web/API/Document/querySelector it returns only ONE element. Are you mix it with QuerySelectorAll()? Link to comment Share on other sites More sharing options...
dsonesuk Posted March 1, 2022 Share Posted March 1, 2022 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now