Question

我正在尝试添加

<span class="bfh-countries" data-country="US" data-flags="true"></span>

在我的js脚本中，但它没有显示任何内容。如果我在我的HTML中添加它可以正常工作，但是当我以几种方式添加时，其中一个是

var flag = document.createElement("span");
flag.setAttribute("class", "bfh-countries" );
flag.setAttribute("data-country", "US" );
flag.setAttribute("data-flags", "true" );

我认为当这个脚本运行时，数据国家/地区所需的css和js可能尚未加载，但两个脚本都高于此代码。

Answer 1

您需要将节点添加到正文中 document.body.append（标志）

Answer 2

我认为你需要选择你的元素。

试试这个 -

var flag = document.createElement("span");
var tag = document.getElementsByTagName("span");
tag.setAttribute("class", "bfh-countries" );
tag.setAttribute("data-country", "US" );
tag.setAttribute("data-flags", "true" );

未经测试，希望它能运作。请注意，此技术将选择所有范围。

Answer 3

检查此工作代码。

   

 function addNew() {
        var flag = document.createElement("SPAN");
        flag.setAttribute("class", "bfh-countries");
        flag.setAttribute("data-country", "US");
        flag.setAttribute("data-flags", "true");

        document.getElementById('result').appendChild(flag);
        
        $("form select.bfh-countries, span.bfh-countries, div.bfh-countries").each(function () {
            var b;
            b = $(this),
            b.hasClass("bfh-selectbox") && b.bfhselectbox(b.data()),
            b.bfhcountries(b.data())
        })
    }

 <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-formhelpers/2.3.0/css/bootstrap-formhelpers.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-formhelpers/2.3.0/js/bootstrap-formhelpers.min.js"></script>
<button onclick="addNew()">Add Flag</button>
<div id="result"></div>

在js中添加Country FormHelper Bootstrap不起作用

3 个答案: