We Keep Coding

Get HTML DOM elements inside a javascript function

I am trying to implement something like this. IF you click the button it would get the HTML of the above elements and insert them in an alert :
<div id="0001">
<h5 class="title">Hello World </h5>
<h4 class="date">2014-07-19 </h4>
<button onclick="addCalendar('#0001. #title','#0001. #date')"> Add to Calendar </button>
</div>
<div id="0002">
<h5 class="title">Bye Bye</h5>
<h4 class="date">2014-07-22 </h4>
<button onclick="addCalendar('#0002. #title','#0002. #date')"> Add to Calendar </button>
</div>
<script>
function addCalendar(title,date){
alert(title + ": " + date);
}
</script>

This code should works..
If you want to get the value of that HTML:
$("button").click(function(){
var value = $(this).siblings("#title").text();
value += $(this).siblings("#date").text();
alert(value);
});
If you want to get the HTML tags too:
$("button").click(function(){
var value = $(this).siblings("#title").html();
value += $(this).siblings("#date").html();
alert(value);
});

Call onClick Function On Multiple Elements

I checked out some other posts on here but still couldn't get this issue to work.
I have several elements in my html with the class cardContainer:
<div class="cardContainer">
<div id="card2" class="block" onclick="changeClass()">
</div>
</div>
<div class="cardContainer">
<div id="card3" class="block" onclick="changeClass()">
</div>
</div>
For each onClick event I would like to call this JS function:
<script type="text/javascript">
function changeClass(){
if(document.getElementById("card2").className == "block")
document.getElementById("card2").className += " rotated";
else
document.getElementById("card2").className = "block";
}
</script>
What I would like to do is include the card3 id, so it fires the same function on click. How would I be able to combine the ids "card2" and "card3" in the javascript so the function works?
I get that if I use getElementById, I can only get one and not multiple ids/classes, but I tried using getElementsByClassName for example without success. Also looked at other posts but couldn't get this to work based on the suggestions... I am new to Javascript and not quite sure on how to approach this.
Thanks for your help!

Try this:
HTML
<div class="cardContainer">
<div class="card block">Click Here</div>
<div class="card block">Click Here</div>
<div class="card block">Click Here</div>
</div>
JavaScript
var cards = document.querySelectorAll(".card");
for (var i = 0; i < cards.length; i++) {
var card = cards[i];
card.onclick = function () {
if (this.classList.contains("block")) {
this.classList.add("rotated");
this.classList.remove("block");
}
else {
this.classList.add("block");
this.classList.remove("rotated");
}
};
}
Here is the Demo
Compatibility table for support of querySelector/querySelectorAll: Can I Use

You can pass the id of the div being clicked on your changeClass function:
<div id="card3" class="block" onclick="changeClass(this.id)">
This way, it will be easier to handle your class switching process:
function changeClass(id) {
var div = document.getElementById(id);
switch (id) {
case "card2": {
if (div.className == "className") {
div.className = "anotherClassName";
}
break;
}
case "card3": {
if (div.className == "block") {
div.className = "rotated";
}
break;
}
default: {
// any other case
}
}
}

use document.getElementsByClassName( doesn't work on ie<9 or FF<3) if you don't care about older browsers and if you do then i suggest you to use jquery, or just sizzle.js to use css selectors

I think you're looking for something like this?. (assuming you're ok with using jQuery)
http://jsfiddle.net/LqpKt/
<div class="cardContainer">
<div id="card1" class="block"></div>
</div>
<div class="cardContainer">
<div id="card2" class="block"></div>
</div>
<div class="cardContainer">
<div id="card3" class="block"></div>
</div>
<div id="output"></div>
$('.cardContainer').click(function(e){
var name = $(this).find('.block').attr('id');
$('#output').append($('<div>').html('clicked ' + name));
})

How to replace text inside IDless <span> with javascript?

I have some text inside <span></span> tags and I want to change that text to something else when page is loaded.
So lets say default text is 'Story' (outputted by some CMS system and I can't edit it). So when page is loaded, .js detects that 'Story' word and replaces it with 'View This Story'.
Is that possible somehow?
Cheers
Update: I did search before asking and none of those methods I found works. Like I said the text is outputted by CMS and it gives wrong title, the title itself cannot be edited via CMS because it is used for other terms and tagging which is correct, so I was looking for js workaround to rename it on page load.
And span has no ID and I cannot give it any ID, because like I said it works as designed by CMS.
<div class="views-row views-row-1 views-row-odd views-row-first active">
<div class="views-field views-field-name">
<span class="field-content">Story</span>
</div>
</div>
<div class="views-row views-row-2 views-row-even">
<div class="views-field views-field-name">
<span class="field-content">Second Story</span>
</div>
</div>
As you can see spans do not have IDs, but repeating classes only.

UPDATED as per OP request
You can replace any text within spans. You could even use regular expressions to make it more flexible, but let's leave this for now:
Native Javascript
var lookupSpanAndReplace = function(textFrom, textTo) {
var spans = document.getElementsByTagName('span');
for (i=0; i<spans.length; i++)
if (spans[i].innerHTML.indexOf(textFrom) >= 0)
spans[i].innerHTML = mySpan.innerHTML.replace(textFrom, textTo);
}
lookupSpanAndReplace("Story", "My New Text");
jQuery
var lookupSpanAndReplace = function(textFrom, textTo) {
$('span:contains(' + textFrom + ')').each(function(index, element) {
$(element).text($(element).text().replace(textFrom, textTo));
});
}
lookupSpanAndReplace("Story", "My New Text");

Try
$('#spanID').text("View This Story");
or if you want to replace a part of text
$('#spanID').text(function () {
return this.innerHTML.replace('Story', 'View This Story');
});

Give you span an ID and then run text([your new text]) on that node:
HTML
<span id="mySpan">Story</span>
jQuery
$('#mySpan').text("View This Story");
JSFiddle with jQuery
Or you can do it without jQuery:
document.getElementById("mySpan").innerHTML = "View This Story";
JSFiddle with plain 'ol Javascript

<script>
function changeSpan(){
var spans = document.getElementsByTagName ("span");
for (i = 0; i < spams.length; i++){
spans[i].innerHTML = textThatYouWant ();
}
}
</script>
<head onload="changeSpan()" >
<tile> ... </title>
</head>
<body>
...
</body>

Use the following to solve the issue.
HTML code:
<html>
<head>
<script>
function replace_text_span()
{
for(i=0;i<document.getElementsByTagName('span').length;i++)
{
document.getElementsByTagName('span')[i].innerHTML=document.getElementsByTagName('span')[i].innerHTML.replace("Story","View This Story");
}
}
</script>
<style>
</style>
</head>
<body onload="replace_text_span()">
<div class="views-row views-row-1 views-row-odd views-row-first active">
<div class="views-field views-field-name">
<span class="field-content">Story</span>
</div>
</div>
<div class="views-row views-row-2 views-row-even">
<div class="views-field views-field-name">
<span class="field-content">Second Story</span>
</div>
</div>
</body>
</html>

Modifying DOM of a webpage

The structure of a webpage is like this :-
<div id='abc'>
<div class='a'>Some contents here </div>
<div class='b'>Some other contents< </div>
</div>
My aim is to add this after the class a in above structure.
<div class='a'>Some other contents here </div>
So that final structure looks like this :-
<div id='abc'>
<div class='a'>Some contents here </div>
<div class='a'>Some other contents here </div>
<div class='b'>Some other contents< </div>
</div>
Can there be a better way to do this using DOM properties. I was thinking of naive way of parsing the content and updating.
Please comment if I am unclear in asking my doubt !

Create the desired element, give it the desired attributes, children, innerHTML, etc, and then append it:
var parent = document.getElementById('abc'),
ele = document.createElement('div');
ele.setAttribute('class', 'a');
ele.innerHTML = "Some other contents here";
parent.appendChild(ele);​
Fiddle
You can be lazy and just set the innerHTML of #abc, but in my opinion this method is more flexible.

I think this is what you are looking for http://jsfiddle.net/cExRS/
The code is this one
element = document.getElementById('abc');
element.innerHTML = "<div class='a'>Some other contents here </div>" + element.innerHTML;
You should really try jquery, it makes things a lot easier

Liked pointed out there's answer for prepending, Insert sibling node in JS
and How can I implement prepend and append with regular JavaScript?
<html>
<head>
<script type="text/javascript">
function add(myClass) {
var root = document.getElementById('abc');
var last = null;
for (var i = 0; i < root.childNodes.length; i++) {
var child = root.childNodes[i];
if (!child.className) continue;
var pat = new RegExp(myClass,'g');
var m = pat.exec(child.className);
if (!m) {
if (!last) continue;
var div = document.createElement('div');
div.appendChild(document.createTextNode('After A content'));
root.insertBefore(div, last.nextSibling);
break;
}
last = child;
}
}
</script>
</head>
<body>
<div id='abc'>
<div class='d'>Some contents here </div>
<div class='b'>Some other contents </div>
<div class='a'>Content A</div>
<div class='a'>Content A1</div>
<div class='a'>Content A2</div>
<div class='a'>Content A3</div>
<div class='b'>Some other contents </div>
</div>
Add div
</body>
</html>

This question is a duplicate :s
How can I implement prepend and append with regular JavaScript?
It's called prepending

rendering xml and html tags in a code snippet HTML

simply,how to render code snippet with <html> tags like this
<div id="container">
<div id="header_area"><tiles:insertAttribute name="header" /></div>
<div id="body_area"><tiles:insertAttribute name="body" /></div>
<div id="sidebar_area"><tiles:insertAttribute name="sidebar" /></div>
<div id="footer_area"><tiles:insertAttribute name="footer" /></div>
</div>
i found this code.but it adds endtag to all />
function encodePreElements() {
var pre = document.getElementsByTagName('pre');
for(var i = 0; i < pre.length; i++) {
var encoded = htmlEncode(pre[i].innerHTML);
pre[i].innerHTML = encoded;
}
};
function htmlEncode(value) {
var div = document.createElement('div');
var text = document.createTextNode(value);
div.appendChild(text);
return div.innerHTML;
}
so above code will be like this
<div id="container">
<div id="header_area"><tiles:insertattribute name="header"></tiles:insertattribute></div>
<div id="body_area"><tiles:insertattribute name="body"></tiles:insertattribute></div>
<div id="sidebar_area"><tiles:insertattribute name="sidebar"></tiles:insertattribute></div>
<div id="footer_area"><tiles:insertattribute name="footer"></tiles:insertattribute></div>
</div>
.innerHTML renders correctly in javascript alert. so how can i render code snippet like first? what is the easy way to do this process?

OK, so I assume that in your question, the first quoted block is embedded inside a <pre> element, like this:
<pre>
<div id="container">
...
</div>
</pre>
And you are trying to convert that so that it becomes:
<pre> <div ... </pre>
The problem is that when the page is loaded, the contents of <pre> is loaded into the DOM. When you get the value of pre[i].innerHTML, it returns you a value that accurately represents the DOM state, but is not the same as your original HTML.
If you want to preserve the exact HTML used in the page, you need to encode that HTML when you generate the page. By the time any JavaScript has access to the content, it's too late - the original HTML is gone, and all you have left is the DOM contents.