Question

dynamic Page with multiple dynamic titles

在这个页面中，每件事都是动态的，任何人都可以帮助我或指导我吗？

认为它是完全动态的。

如果我通过一些错误调用方法changeMe（e）

E / Web控制台（5341）：未捕获TypeError：对象＃在文件中没有方法'insertAdjacentHTML'：///android_asset/www/subpage.html:29

我已经开发了一些部分

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, target-densitydpi=device-dpi" />

    <script>

        function changeMe(e)
        {
             e.insertAdjacentHTML("beforeEnd","<div id='inner'></div>");
             addHeadings();

        }

        function addHeadings()
        {
             inner.insertAdjacentHTML("beforeEnd","<h3>Title1</h3>");
             InitThumbs();

        }
        function InitThumbs()
        {
            inner.insertAdjacentHTML("beforeEnd","<ul style='background-color:#ffccaa' id='images'></ul>");
            changeLi();

        }

        function changeLi() 
        {
            for(i=0; i<20;i++)
            {
                images.insertAdjacentHTML("BeforeEnd","<li><a href='subpage.html'> <img width='30%' class='photo' src='images/img.png'>adsad</a></li> ");
            }
        }



    </script>

    <style>



        html, body
        {
            margin: 0;
            padding: 0;
            border: 0;
            outline: 0;
            font-size: 100%;
            text-decoration: none;

        }

        ul
        {
            margin: 0;
            padding: 0;
            white-space: nowrap;
            width: 100%;
            overflow-x: auto;
        }

        li 
        {
            display: inline;
        }

        #content 
        {
            height:100%;
        }


        .title
        {
            height:10%;
            width="100%"
            border-bottom-color: #000;
            border-bottom-style: solid;
            border-bottom-width: 1%;                
        }

        .title .center img
        {
            height:100%;       
        }

        .title .left img
        {
            height:100%;   
        }

        .title .right img
        {
            height:100%;       
        }

        .title .center
        {
            height:100%;    
            width:50%;  
            float: left;       
        }
        .title .right
        {
            height:100%;    
            width:25%;  
            float: left;    
            margin:0 auto;
            overflow:hidden;   
        }
        .title .left
        {
            height:100%;
            width:25%;  
            float: left;    
            margin:0 auto;
            overflow:hidden;  
        }

        .outer
        {
            height:90%;             
        }

        a:link,
        a:visited 
        {
            color: #09f;
        }

        a:hover,
        a:focus,
        a:active 
        {
            color: #344;
        }

    </style>

</head>

    <div id="content">

        <div class="title" align="center">
            <span class="left">
                <img src="images/back.png" onclick="history.go(-1);return false;"/>
            </span>
            <span class="center">
                <img src="images/title.gif"/>
            </span>
            <span class="right">
                <img src="images/home.png" onclick="history.go(-(history.length - 1));"/>
            </span>
        </div>
        <div id="outer">
        </div>

    </div>

Answer 1

为了使用“insertAdjacentHTML（）”，您需要将其定义为函数，因为它不是本机JavaScript的一部分。

更好，请使用innerHTML()

var d = document.getElementById("mydiv"); d.innerHTML

或者，如果您使用的是jQuery，则可以使用$("#mydiv").html()

在你的情况下，

function changeMe(obj) {
  $(obj).html('<div id="inner"></div>')
  addHeadings();
}

使用javascript在phonegap中的动态页面

1 个答案: