locked
Generating dynamic HTML content with jQuery RRS feed

  • Question

  • User206383436 posted

    Hi,

    I am trying to add HTML content dynamically using JavaScript and jQuery. The test I am performing shows the page correctly but, if I see the "Page source", such HTML content is not included. 

    The Controller is very straight forward:

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.Mvc;
    
    namespace Prueba01.Controllers
    {
        public class PruebaController : Controller
        {
            // GET: Prueba
            public ActionResult Index()
            {
                return View();
            }
        }
    }

    The View is very simple just for a test:

    <script src="~/Scripts/test.js"></script>
    
    <br />
    <div id="secondaryContainer">
    
    </div>
    <br />

    And the JavaScript code (test.js) is as follows:

    $(document).ready
    {
        $(function () {
            Display();
        });
    };
    
    function Display() {
        var $secondaryContainerDiv = $("#secondaryContainer");
        var $rowDiv = $("<div class='row'></div>").appendTo($secondaryContainerDiv);
        var $item1 = $("<div>This is a test</div>").appendTo($rowDiv);
        var $item2 = $("<img src='/Content/Images/mouse.jpg' />").appendTo($item1);
    }
    

    My View has a <div id="secondaryContainer"> where HTML content should be generated. After running my small project, I right-click the rendered page and select "View page source" where such a <div> is shown but without anything inside of it as shown below. However, the page is rendered correctly because the text of $item1 and the image in $item2 are shown.

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title> - My ASP.NET Application</title>
        <link href="/Content/bootstrap.css" rel="stylesheet"/>
    <link href="/Content/site.css" rel="stylesheet"/>
    
        <link href="/Content/ej/web/bootstrap-theme/ej.web.all.min.css" rel="stylesheet"/>
        <script src="/Scripts/spin.js"></script>
        <script src="/Scripts/jquery-3.3.1.min.js"></script>
        <script src="/Scripts/jsrender.min.js"></script>
        <script src="/Scripts/ej/ej.web.all.min.js"></script>
    
    </head>
    <body>
        <div class="navbar navbar-inverse navbar-fixed-top">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="/">Application name</a>
                </div>
                <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li><a href="/">Home</a></li>
                        <li><a href="/Home/About">About</a></li>
                        <li><a href="/Home/Contact">Contact</a></li>
                    </ul>
                        <ul class="nav navbar-nav navbar-right">
            <li><a href="/Account/Register" id="registerLink">Register</a></li>
            <li><a href="/Account/Login" id="loginLink">Log in</a></li>
        </ul>
    
                </div>
            </div>
        </div>
       <div class="container body-content">
             
    <script src="/Scripts/test.js"></script>
    
    <br />
    <div id="secondaryContainer">
    
    </div>
    <br />
       	     
       </div>
       <footer>  
          <div class="container body-content">   
             <hr/>          
             <p>&copy; 2020 - My ASP.NET MVC Application</p>              
           </div>        
        </footer>
               
           <script type='text/javascript'>$(function($){});</script>
        <script src="/Scripts/bootstrap.js"></script>
    <script src="/Scripts/respond.js"></script>
    
    </body>
    </html>
    

    This is the first time I use this approach and surely there is something I am missing.
    I will very much appreciate your feedback.

    Best regards,
    Jorge Maldonado

    Tuesday, June 30, 2020 3:58 PM

All replies

  • User348806598 posted

    My View has a <div id="secondaryContainer"> where HTML content should be generated. After running my small project, I right-click the rendered page and select "View page source" where such a <div> is shown but without anything inside of it as shown below. However, the page is rendered correctly because the text of $item1 and the image in $item2 are shown.

    This is the browser's default behavior. View source will show you only that is sent from the server as a response. However, if you like to see the dynamically added HTML, you can use the developer tool and inspect the div element. You will be able to see the dynamically added HTML.

    Tuesday, June 30, 2020 4:57 PM
  • User206383436 posted

    Thanks for your reply asteranup.

    From your comment, I understand that there is no way to "include" the HTML in the rendered page and this is what I really need for SEO purposes so Google is able to "see" the content. In my case, there will be several important links to other pages that Google "must detect".

    So, based on this, I suppose that I have to change my approach. Am I correct?

    Respectfully,
    Jorge Maldonado

    Tuesday, June 30, 2020 5:47 PM
  • User-474980206 posted

    read this for rules on support for javascript 

       https://developers.google.com/search/docs/guides/javascript-seo-basics

    Tuesday, June 30, 2020 7:27 PM