mac_gabe Posted June 23, 2011 Share Posted June 23, 2011 Hi, I want to change a web page by nesting extra div tags inside a div which is contained in my html - so that I can format subsections. I don't want to do this with an onclick button, but as the page loads . I'm a beginner at javascript and am struggling with the syntax, so would really appreciate any help. This is an example of what I want to do. Change this: <div id="categories"> <a href="files/apple.php" class="link-enabled">Apple</a><br /> <a href="files/banana.php" class="link-enabled">Banana</a><br /> <a href="files/coconut.php" class="link-enabled">Coconut</a><br /> <a href="files/chair.php" class="link-enabled">Chair</a><br /> <a href="files/lamp.php" class="link-enabled">Lamp</a><br /> <a href="files/table.php" class="link-enabled">Table</a> </div> To this: <div id="categories"> <div class="subcategory_title">FRUIT</div> <div id="fruit"> <a href="files/apple.php" class="link-enabled">Apple</a><br /> <a href="files/banana.php" class="link-enabled">Banana</a><br /> <a href="files/coconut.php" class="link-enabled">Coconut</a><br /> </div> <div class="subcategory_title">FURNITURE</div> <div id="furniture"> <a href="files/chair.php" class="link-enabled">Chair</a><br /> <a href="files/lamp.php" class="link-enabled">Lamp</a><br /> <a href="files/table.php" class="link-enabled">Table</a> </div> </div> The actual list is much longer, with about 6 different subcategories, so I expect to be using the first and last items of each subcategory (ie Apple/Coconut and Chair/Table) to identify the start and end point of each find and replace. If someone can just show me the mechanism of find and replace and adding the new html to the document automatically, I can probably fill in the details. All the examples I've seen so far use buttons, or either change the tag or the text but not both. I also need to know where to place the code. Many thanks for any help. Quote Link to comment https://forums.phpfreaks.com/topic/240204-replace-text-html-onload-beginner-level/ Share on other sites More sharing options...
Adam Posted June 23, 2011 Share Posted June 23, 2011 You can execute code after the page has loaded, using this inside the <head>: <script type="text/javascript"> window.onload = function() { // code to execute here } </script> That will bind the code contained within the anonymous function to the "onload" event of the window. Although this approach seems pretty odd. If you're altering the content after the page has loaded, why not just modify it at the source? Wouldn't that be easier than trying to manipulate the code with JS afterwards? If you do decide to go ahead for whatever reason, then you should look into the children property of an object. That will provide a collection of children objects that you can traverse through to find your target points to insert the additional mark-up. Here's a few links that should help you get going: https://developer.mozilla.org/en/document.getElementById https://developer.mozilla.org/en/DOM/element.children https://developer.mozilla.org/En/InsertBefore Be aware that not all the functions on the MDC site will work with other browsers (namely IE) - you need to test in different browsers to ensure your code is cross-browser compatible. Quote Link to comment https://forums.phpfreaks.com/topic/240204-replace-text-html-onload-beginner-level/#findComment-1233829 Share on other sites More sharing options...
mac_gabe Posted June 23, 2011 Author Share Posted June 23, 2011 Hi MrAdam. In real life what I'm trying to do is add subcategory headers to a list of blog categories in a blog sidebar. I can't modify the <div id="categories"></div> at the source, because it is generated and styled automatically by my blogging programme. It is exported by the programme as an html page (not seen directly by users), and then that page is placed on the user-visible index.php page (and all the other pages on the site) with a "php include". I can style this index.php page and also change the html template for it. I think I have worked out where I may be going wrong - I've now read somewhere the javascript has to come after the div has loaded - which seems to make sense - so I'm going to try that and see how I get on. I'll put your function in the head and then execute it at the bottom of the page. Thanks also for the links. Quote Link to comment https://forums.phpfreaks.com/topic/240204-replace-text-html-onload-beginner-level/#findComment-1233850 Share on other sites More sharing options...
Adam Posted June 23, 2011 Share Posted June 23, 2011 The code I provided is an event, executed after the page has finished loading. If you want to run the code as the HTML is generated, just place it within script tags at the bottom of the page. Quote Link to comment https://forums.phpfreaks.com/topic/240204-replace-text-html-onload-beginner-level/#findComment-1233874 Share on other sites More sharing options...
mac_gabe Posted June 23, 2011 Author Share Posted June 23, 2011 Success! Many thanks MrAdam - I was trying to work out how to execute that code, but it turns out I didn't need to ! I've inserted a "Hello" already, like so: <script type="text/javascript"> window.onload = function() { var oldHTML = document.getElementById('blog-categories').innerHTML; var newHTML = "Hello" + oldHTML; document.getElementById('blog-categories').innerHTML = newHTML; } </script> so I'm pretty confident with a bit of perserverance I should be able to get the other html embedded too. Will report back later… Quote Link to comment https://forums.phpfreaks.com/topic/240204-replace-text-html-onload-beginner-level/#findComment-1233891 Share on other sites More sharing options...
mac_gabe Posted June 23, 2011 Author Share Posted June 23, 2011 OK I've got the first part of html in OK. This works: <script type="text/javascript"> // this adds an inner div named cat1 with FRUIT header window.onload = function() { var oldHTML = document.getElementById('blog-categories').innerHTML; var newHTML = '<div class="subcategory_title">FRUIT</div><div id="cat1">' + oldHTML + "</div>"; document.getElementById('blog-categories').innerHTML = newHTML; } </script> But, if I try to add a find and replace on the newly created "cat1" div, I seem to stop even the first part working. This doesn't work: <script type="text/javascript"> window.onload = function() { var oldHTML = document.getElementById('blog-categories').innerHTML; var newHTML = '<div class="subcategory_title">FRUIT</div><div id="cat1">' + oldHTML + "</div>"; document.getElementById('blog-categories').innerHTML = newHTML; // this should add a second div named "cat2", after the line with the "Unknown" category var oldcat1 = document.getElementById('cat1').innerHTML; var find1 = 'class="blog-category-link-enabled">Unknown</a><br />'; var replace1 = 'class="blog-category-link-enabled">Unknown</a><br /></div><div class="subcategory_title">FURNITURE</div><div id="cat2">'; var newcat = oldcat1.replace(find1, replace1) + "</div>"; document.getElementById('cat1').innerHTML = newcat; } </script> Any ideas where I may be going wrong. (I know I'm not using the children method, but I thought this might be easier for a beginner) Quote Link to comment https://forums.phpfreaks.com/topic/240204-replace-text-html-onload-beginner-level/#findComment-1233907 Share on other sites More sharing options...
mac_gabe Posted June 23, 2011 Author Share Posted June 23, 2011 OK, I'm guessing it's the find and replace terms that are breaking everything. Because I've tried with a simple word replace (e.g. changing "Unknown" for "Other") and that seems to work OK. I suppose you can't add div elements with find and replace because then it breaks the DOM tree or something. I'll have a go with the children method … (gulp) Quote Link to comment https://forums.phpfreaks.com/topic/240204-replace-text-html-onload-beginner-level/#findComment-1233925 Share on other sites More sharing options...
mac_gabe Posted June 23, 2011 Author Share Posted June 23, 2011 I'm giving up on this. I've spent all day looking at online manuals and trying to decipher examples but I'm still light years away. This is as far as I got: <script type="text/javascript"> window.onload = function() { var oldHTML = document.getElementById('blog-categories').innerHTML; var newHTML1 = '<h2 id="header_builders">BUILDERS</h2><div id="cat_builders"></div>'; var newHTML2 = '<h2 id="header_events">EVENTS</h2><div id="cat_events"></div>'; var newHTML3 = '<h2 id="header_other">OTHER</h2><div id="cat_other"></div>'; var newHTML4 = '<h2 id="header_all">ALL</h2><div id="cat_all">'+ oldHTML + '</div>'; var newHTML5 = newHTML1 + newHTML2 + newHTML3 + newHTML4; document.getElementById('blog-categories').innerHTML = newHTML5; var x01 = document.getElementById('cat_all'); } </script> It looks like I would have to make arrays, pull out the relevant child elements with an if clause and stick them back in the divs, but that's pretty complex stuff, and way over my head. Since I've already worked out a solution using PHP by manpulating the text, I'll just stick to that method. Quote Link to comment https://forums.phpfreaks.com/topic/240204-replace-text-html-onload-beginner-level/#findComment-1234018 Share on other sites More sharing options...
Adam Posted June 24, 2011 Share Posted June 24, 2011 If you can wait a day or two I can help you get it working? I'm at work right now though and don't have the time. Quote Link to comment https://forums.phpfreaks.com/topic/240204-replace-text-html-onload-beginner-level/#findComment-1234237 Share on other sites More sharing options...
mac_gabe Posted June 24, 2011 Author Share Posted June 24, 2011 Sure, I would be greatful for the help, and would love to learn how to do this. I did learn quite a bit over the last few days thanks to your help and links - even managed to insert extra divs etc (not really necessary) the proper DOM way with append etc - but I had to cut my losses as I could see no end in sight. Meanwhile I've sorted out a PHP script which does all the finding and replacing - then I go back to Javascript (JQuery) to open the menus. But I can see that in theory pure Javascript would be a more elegant way of manipulating the elements. Quote Link to comment https://forums.phpfreaks.com/topic/240204-replace-text-html-onload-beginner-level/#findComment-1234317 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.