使用jquery在特定位置插入html代码

时间:2017-06-18 12:12:29

标签: javascript jquery html insert append

我的离开代码存放在jquery中的变量中,我希望用jquery编辑这个变量,以便在特定位置插入一些行查看使用jquery blockquote编辑后希望接收的代码

  

我的离境代码

<div class="form-group">
    <label class="control-label required">Specification n°1</label>
    <div id="products_specifications_0">
        <div class="form-group">
            <label class="control-label required" for="products_specifications_0_reference">Reference</label>
            <input type="text" id="products_specifications_0_reference" name="products[specifications][0][reference]" required="required" class="form-control" />
        </div>
        <div class="form-group">
            <label class="control-label required" for="products_specifications_0_price">Price</label>
            <input type="text" id="products_specifications_0_price" name="products[specifications][0][price]" required="required" class="form-control" />
        </div>
    </div>
</div>
  

使用jquery

编辑后希望收到的代码
<div class="form-group">
    <label class="control-label required">Specification n°1</label>
    <div id="products_specifications_0">
        <div class="col-sm-5"><!-- INSERT THIS LINE -->
            <div class="form-group">
                <label class="control-label required" for="products_specifications_0_reference">Reference</label>
                <input type="text" id="products_specifications_0_reference" name="products[specifications][0][reference]" required="required" class="form-control" />
            </div>
        </div><!-- INSERT THIS LINE -->
        <div class="col-sm-5"><!-- INSERT THIS LINE -->
            <div class="form-group">
                <label class="control-label required" for="products_specifications_0_price">Price</label>
                <input type="text" id="products_specifications_0_price" name="products[specifications][0][price]" required="required" class="form-control" />
            </div>
        </div><!-- INSERT THIS LINE -->
    </div>
</div>

1 个答案:

答案 0 :(得分:0)

在您的离境代码中添加此行

<div class="form-group">
    <label class="control-label required">Specification n°1</label>
    <div id="products_specifications_0">
        <div class="myclass"><!-- ADD THIS LINE -->
            <div class="form-group">
                <label class="control-label required" for="products_specifications_0_reference">Reference</label>
                <input type="text" id="products_specifications_0_reference" name="products[specifications][0][reference]" required="required" class="form-control" />
            </div>
        </div><!-- ADD THIS LINE -->
        <div class="myclass"><!-- ADD THIS LINE -->
            <div class="form-group">
                <label class="control-label required" for="products_specifications_0_price">Price</label>
                <input type="text" id="products_specifications_0_price" name="products[specifications][0][price]" required="required" class="form-control" />
            </div>
        </div><!-- ADD THIS LINE -->
     <button id="change">Click to Change</button>
    </div>
</div>

请注意我在那里添加了一个按钮,因为您没有提到任何事件。然后添加这个脚本......

$(document).ready(function(){
       $("#change").click(function(){
           $(".myclass").addClass('col-sm-5');
        });
});

我希望这对你有用