入力ボックス（フォーム）をHTMLボックス内に配置し、JQueryを使用して配置する方法

こんにちは私はHTMLボックスを持っており、フォームの一部として入力テキストボックスを配置し、ボックス。これはJQueryを使って行うことができますか？はいの場合、誰かがJQueryで入力ボックスをボックス内に表示するためのコードをいくつか投稿することができます。私はまた、入力ボックスのサイズを変更する必要があります。 JQueryを使用する理由は、JQueryを使用してMathJaxを使ってレンダリングされた数学記号を表示していることです。それ以外の場合は、レコード生成入力ボックス（フォーム）をHTMLボックス内に配置し、JQueryを使用して配置する方法

#header { 
    width: 100%; 
    background-color: white; 
    height: 30px; 
} 

#container { 
    width: 600px; 
    height:1500px 
    background-color: #ffffff; 
    margin: auto; 
} 
#first { 
    width: 100px; 
    border: 2px solid black; 
    float: left; 
    height: 400px; 
} 

#second { 
    width: 300px; 
    border: 2px solid black; 
    top:0; 
    float: right; 
    height: 100px; 
} 

#third { 
    position: absolute; 
    top: 180px; 
    border: 2px solid black; 
    right:430px; 
    width: 200px; 
    height: 100px; 
}

<body> 
    <div id="header"></div> 
    <div id="container"> 
    <div id="first"></div> 
    <div id="second"></div> 
    <div id="third"></div> 
    <div id="clear"></div> 
    </div> 
</body>

出典

2016-07-22 Victor Mehta

の方法により行うことができますあなたは試みることができる：

$('#third').html('<input type="TYPE-OF-INPUT" name="INPUT-NAME" class="IF-ANY" id="IF-ANY" />') 
$('#third input').css({ /*to style*/ 
    'prop1':'val1', 
    'prop2':'val2', 
    . 
    . 
    . 
    'propn':'valn' 
});

出典

2016-07-22 23:24:45

おかげ氏はオタク。また、JQueryコードを使用して、メインコンテナ内で＃3の同じボックスをレンダリングすることもできますか？もしあなたがそうでなければ私は新しい投稿でこの質問をすることができます。 –

入力と同じようにしてください。今度はセレクタを次のように変更してください： $（ '＃container＃third'）css（{ 'prop1'： 'val1'、 'prop2'： 'val2 '、''）; –

Mr. Geekありがとうございますが、次のJQueryコードでコンテナ内の3番目のボックスを表示しようとしましたが、表示されませんでした。コードの何が間違っているかについての示唆はありますか？ $（ '＃container＃third'）。css（ '

'） –

$('<input>').attr({ 
 
    type: 'text', 
 
    id: 'foo', 
 
    name: 'bar' 
 
}).appendTo('#third');

#third { 
 

 
    position: absolute; 
 
    top: 180px; 
 
    border: 2px solid black; 
 
    right:430px; 
 
    width: 200px; 
 
    height: 100px; 
 
} 
 

 
input#foo { 
 
    border: 1px red solid; 
 
    /* position css*/ 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="third">Div content</div>

出典

2016-07-22 23:29:45 Kld

入力ボックス（フォーム）をHTMLボックス内に配置し、JQueryを使用して配置する方法

答えて

関連する問題