All geek questions in one place

Updating div content with javascript

Instead of trying to create many different pages on my website, I try to update the contents of one div when different elements in the navigation bar click to update the contents of the maint div. I tried to find a simple example using Javascript:

<script type="text/javascript"> function ReplaceContentInContainer(id,content) { var container = document.getElementById(id); container.innerHTML = content; } </script> <div id="example1div" style="border-style:solid; padding:10px; text-align:center;"> I will be replaced when you click. </div> <a href="javascript:ReplaceContentInContainer('example1div', '<img src='2.jpg'>' )"> Click me to replace the content in the container. </a>

This works fine when I just try to update the text, but when I put the img tag there, as you can see, it stops working.

In any 1) What is the problem with how I try to do this? or 2) What is a better / easier way to do this?

I am not stuck on Javascript. jQuery will also work if it is simple or simple. I want to create a function that just allows me to pass any HTML that I want to update, and paste it into the div tag and pull out the "old" HTML.

+4
source share
3 answers

You have some problems with shielding:

 ReplaceContentInContainer('example1div', '<img src='2.jpg'>') ^ ^

The inner ' must be escaped, otherwise the JS engine will see the ReplaceContentInContainer('example1div', '<img src=' plus some syntax errors that result from the subsequent 2.jpg'>') . Change the call (header prompt on cHao ' regarding escaping < and > in HTML):

 ReplaceContentInContainer('example1div', '&lt;img src=\'2.jpg\'&gt;')

An easy way to do this with jQuery is to add an identifier to your link (say "idOfA"), then use the html() function (this is more cross-platform than when using innerHTML ):

 <script type="text/javascript"> $('#idOfA').click(function() { $('#example1div').html('<img src="2.jpg">'); }); </script>
+6
source

First of all, do not put complex JavaScript code in href attributes. Hard to read or maintain. Use the <script> or completely put the JavaScript code in a separate file.

Secondly, use jQuery. JavaScript is a strange beast: the principles underlying its templates have not been developed with modern web design in mind. jQuery gives you a lot of power without harming JavaScript.

Third, if your goal is to avoid endlessly duplicating the same basic structure for all (or many) of your pages, consider using a template system. Templating systems allow you to connect certain content to forests that contain common elements of your site. If this sounds complicated, it is because I did not explain it well. Google is this and you will find many great resources.

Relying on JavaScript for navigation, your site will not be properly indexed by search engines and will be completely unsuitable for someone with JavaScript turned off. It is increasingly common and acceptable to rely on JavaScript for basic functionality. But your site should, at a minimum, provide discrete pages with reasonable and durable URLs.

Now, all that said, let me get to your question. Here is one way to implement it in jQuery. This is not the worst, most rigorous implementation, but I tried to make something very readable:

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jQuery Example</title> <style type="text/css" media="all"> /* all content divs should be hidden initially */ .content { display: none; } /* make the navigation bar stand out a little */ #nav { background: yellow; padding: 10px; } </style> </head> <body> <!-- navigation bar --> <span id="nav"> <a href="#about_me">about me</a> | <a href="#copyright">copyright notice</a> | <a href="#my_story">a story</a> </span> <!-- content divs --> <div class="content" id="about_me"> <p>I'm a <strong>web developer</strong>!</p> </div> <div class="content" id="copyright"> <p>This site is in the public domain.</p> <p>You can do whatever you want with it!</p> </div> <div class="content" id="my_story"> <p>Once upon a time...</p> </div> <!-- jquery code --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> <script> // Wait for the document to load $(document).ready(function() { // When one of our nav links is clicked on, $('#nav a').click(function(e) { div_to_activate = $(this).attr('href'); // Store its target $('.content:visible').hide(); // Hide any visible div with the class "content" $(div_to_activate).show(); // Show the target div }); }); </script> </body> </html>

Ok, hope this helps! If jQuery looks attractive, consider starting with this tutorial .

+2
source

Your main problem with your example (except that innerHTML not always supported) is that < and > can easily break HTML if they are not escaped. Use &lt; instead and &gt; . (Don't worry, they will be decoded before JS sees them.) You can use the same trick with quotes (use &quot; instead of " to get around quoting problems).

+1
source

Source: https://habr.com/ru/post/1343116/

More articles:


All Articles