javascript - Change text with javascript

Question

My website is based on a platform and I can change a little bit of the layout, but certain parts render code automatically. My problem? It is in English and I need it in Spanish. I can add javascript before the body of the website but I can't change the html directly so I was thinking I could use onload to change the text. What do you guys think? I can use jQuery, too, if that helps.

I need to change this:

 <div class="c_wrapper">
     <h3 class="d_customize_title" align="left">
         <span id="left_title">
            Playera Max
        </span>
         <a onclick="d.showProductInfo(); return false;" href="#">
            Product details
        </a>
    </h3>
 </div>

to this:

<div class="c_wrapper">
    <h3 class="d_customize_title" align="left">
        <span id="left_title">
            Playera Max
        </span>
        <a onclick="d.showProductInfo(); return false;" href="#">
            Detalles del producto
        </a>
    </h3>
</div>

Answer 1

Two options:

1. Find the part in the theme (platform) that is rendering the code and change it from there (best option)

2. Use jQuery to replace the html:

---

$(".c_wrapper a").text("Detalles del producto");

Example:

<script type="text/javascript">
    $(".c_wrapper a").text("Detalles del producto");
</script>

</body>

Working Example: http://jsfiddle.net/vtHBV/

Answer 2

As others have mentioned it's a bit hacky to do this with Javascript but here's another way to do it without jQuery:

// helper to make sure we get a sibling that is an element
function getNextSibling(node){
    sibling = node.nextSibling;
    while (sibling.nodeType != 1){
        sibling = sibling.nextSibling;
    }
    return sibling;
}

// set text
getNextSibling(document.getElementById('left_title')).innerHTML = 'Detalles del producto';

Demo: http://jsfiddle.net/louisbros/dkymR/

Answer 3

This is perfect for jQuery, if you don't have control over the content when you initially load it it may be the best option. Below is a working sample for your example:

$(function(){
      $("#left_title + a").text("Detalles del producto");
});