jingleriot jingleriot - 3 years ago 287
CSS Question

How to add a div object in jquery .html() function without breaking the entire functionality

I'm not sure how to ask this question, so maybe that is why I can't find an answer to it, as well as being incredibly new to javascript in general, but here goes:

I'm trying to change the content of my main div using javascript by being able to click on a "link" that changes it.
I THOUGHT I found a solution when I looked online with the

$( "#but2" ).click(function() {
$("#Main").html("fffffffffffgdfg");


however when I try to add the content into the
html("")
section, if it has the
<div class=""></div>
in it at all, it ceases to function. It works fine if it's just text or stylized text, but I want to be able to change the insides all together since I am using stylized divs to create a cohesive webpage. I can understand if what I am asking is impossible in the way I am asking to do it, but is there a way to do it, period?

an example of what I am doing

<div class="Main">content
<div class="sub">sub content</div>
</div>


where the "sub" content would be changed with the javascript when the accompanying button is pressed.

More simply put: have a main page, then click a button that says "blog", and then blog entries show up (however that blog has div properties within it), without changing the content outside of "Main".

I apologize if I am not making any sense. Hopefully someone can help! If you need anymore information, please let me know. I am desperate for an answer and very, very new to javascript.

EDIT:
Here is the actual code used and a massive example of what I am trying to do. It was originally just .html("wall of code"), but I also tried out append("wall of code"), as well as trying to use '' instead of ""




<script type="text/javascript">
$( document ).ready(function() {

$( "#but1" ).click(function() {
$("#Main").append('<div class="ddd"><h2>Sector Chimera</h2>
<img src="{image:Game 1}" width="{text:DivWidth}"><br><br>
<div class="din">
<b>Length:</b> Long = 20+ hours.<br>
<b>Game Type:</b> 3D/2D Persona-esque RPG.<br>
<b>Genre:</b> Sci-Fi/Thriller <br>
<b>Rating:</b> Aimed to be rated 16+ <br>
<b>Completion:</b> Currently being revamped.<br><br>
<b>Summary:</b> The City Chimera, a dream come true for any wayward souls, criminals, and terminally ill desperate for a solution to life's problems. Sign away your life in favor of ground breaking treatments, a paycheck, or just a roof over your head and warm food in your belly. But alas, nothing really comes free, and being a guinea pig has its very severe downsides. Afterall, you don't build a secret city to house experiments if you're up to good.<br><br>Take control of the new kid on the block and uncover the dark secrets that lie within the walls of Sector Chimera, along with a ragtag team of misfits and downtrodden heroes in the making... Should you choose it.</div>
</div>

<div class="ddd"><h2>Ventio Mortis</h2><img src="{image:Game 2}" width="{text:DivWidth}"><br><br>
<div class="din">
<b>Length:</b> Medium = 4-11 hours.<br>
<b>Game Type:</b> 2D Visual Novel.<br>
<b>Genre:</b> Horror/Otome <br>
<b>Rating:</b> Aimed to be rated 16+ <br>
<b>Completion:</b> 7%<br><br>
<b>Summary:</b> When bodies start surfacing on the streets of a normally quiet town, things start to get a little tense in the city – for both the residents above and below ground and the law. As a detective tails Hollowelle and her gang of undead misfits, she does her very best to avoid her way of life from crumbling beneath her. Add to her misfortunes betrayal from within her own family, a human detective on her case is the least of her worries.
</div>
</div>




<div class="ddd"><h2>Rise of Remix</h2><img src="{image:Game 3}" width="{text:DivWidth}"><br><br>
<div class="din">
<b>Length:</b> Long = 20+ hours.<br>
<b>Game Type:</b> 3D RPG.<br>
<b>Genre:</b> Sci-Fi/Action/Adventure <br>
<b>Rating:</b> Aimed to be rated 16+ <br>
<b>Completion:</b> 2%<br><br>
<b>Summary:</b> euismod tristique eros, vel mattis purus condimentum non. Nulla ullamcorper, tellus id lobortis ultricies, orci arcu luctus felis, in rhoncus magna odio et eros. Sed eros leo, mollis eu urna eget, varius tincidunt neque. Donec tempus faucibus turpis quis pellentesque. Aliquam sit amet ligula vestibulum, euismo facilisis porttitor. Nam a mattis nulla. Vestibulum consectetur sed arcu vel tristique. Aliquam rutrum, sapien a ultricies eleifend, ex sapien auctor lacus, ac condimentum lacus dolor ac mi.</div>
</div>


<div class="ddd"><h2>Betterflies</h2><img src="{image:Game 4}" width="{text:DivWidth}"><br><br>
<div class="din"><b>Length:</b> Short = 2-4 hours.<br>
<b>Game Type:</b> 2D Visual Novel.<br>
<b>Genre:</b> Otome Game <br>
<b>Rating:</b> Aimed to be rated 12+ <br>
<b>Completion:</b> 40%.<br><br>
<b>Summary:</b> Just when you thought your anxiety could be controlled, it just seems to control you again and again. After a particularly bad anxiety attack, you are sent to group therapy and forced to live in a rehabilitation center until your mental health improves. You are not alone, however, with a small group of soon-to-be friends (or more), and Dr. Sarah, your life long therapist, to help guide you on the way to better health, as long as you want it, of course. A support system is important, after all, in recovery.</div>
</div></div>')
});

$( "#but2" ).click(function() {
$("#Main").html("This is the updated text");
});

$( "#but3" ).click(function() {
$("#Main").html("This is the updated text");
});

$( "#but4" ).click(function() {
$("#Main").html("This is the updated text");
});

$( "#but5" ).click(function() {
$("#Main").html("This is the updated text");
});

$( "#but6" ).click(function() {
$("#Main").html("This is the updated text");
});

$( "#but7" ).click(function() {
$("#Main").html("This is the updated text");
});



});
</script>




As well as my actual divs, where they are all nestled within "container", and the content I want changed is nestled in "d2"



<div class="d2">
<div id="Main">
<div class="ddd"><h2>Sector Chimera</h2>
<img src="{image:Game 1}" width="{text:DivWidth}"><br><br>
<div class="din">content
</div></div></div>



Answer Source

It sounds like you want something like a "Single Page App." Where you have buttons or some Navigation Bar / Header that stays at the top, and in you have a body that changes depending on the button that the user clicks. I instead of doing

$("#Main").html("fffffffffffgdfg"); 

I would create a separate .html file that contains the markup that will be dynamically loaded. This is better because it is more "future proof" in the sense that if the blog gets substantially long, you wouldn't want to pass all the markup as a JavaScript string. I would change the above line to:

function load(name) {

  // Build path to file
  var path = name + '.html';

  // Load the inner html from that file into the div with id='content'
  $('#content').load(path);
}

And in your index.html I would do the following:

<!-- These buttons will stay at the top like a header -->
<div>

  <!-- Upon being clicked, they will pass their names to the load function -->
  <button name='contact'onclick='load(name)'>Contact</a>
  <button name='blog' onclick='load(name)'>Blog</a>
</div>

<!-- This will be the div that changes -->
<div id='content'></div>

Now, all you have to do is create the files:

contact.html
blog.html

And you will be able to click the buttons and the inner HTML will change

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download